Can I use webpack on the client side without nodejs server?

Question

I am trying to build a web app where I want to store all html, js and css files on amazon s3, and communicate with a restful server through api.

I am trying to achieve lazy loading and maybe routing with react router. It seems that webpack has this feature code splitting that would work similarly as lazy loading.

However, all of the tutorial and examples I found involves webpack-dev-server, which is a small node express server. Is there anyway I could generate bundle at build time and upload everything to amazon s3 and achieve something similar to Angular's ocLazyLoading?

Solution

It's definitely possible to create a static bundle js file, which you can use in your production code that does not include webpack-dev-server.

See this example as a reference (note: I am the owner of this repo). webpack.prod.config.js does create a production ready bundle file using webpack via node.js which itself does not require node.js anymore. Because of that you can simply serve it as a simple static file (which is done in the live example).

The key difference is how the entry points are written in the dev- and production environments. For development webpack-dev-server is being used

module.exports = {
    entry: [
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './src/index'
    ],
    // ...
}

In the production environment you skip the webpack-dev-server and the hot reloading part

module.exports = {
    entry: [
        './src/index'
    ],
    // ...
}

If you want to split your code into more than one bundle, you might want to have a look at how to define multiple entry points and link the files accordingly.

Comments

[LoveProgramming]

Thank you! So all webpack features would still work right? Like lazy loading (code splitting)?

[dotcs]

Sure. Have a look here and here for a detailed code base. The important parts are require.ensure (CommonJs) or require (AMD).