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?

Is your goal to not use nodejs during development? Or is it enough to not have a requirement for node in production? — David Gilbertson, Sep 10 '15 at 03:32
My goal is to put all html, js and css etc on amazon s3 where they can only host static web pages. So I guess I could use node in development. — LoveProgramming, Sep 10 '15 at 04:08
Yep I'd suggest that, employ node/webpack as your build pipeline then just copy the static files up to S3 — David Gilbertson, Sep 10 '15 at 07:01

score 10 · Accepted Answer · answered Sep 10 '15 at 07:02

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.

Thank you! So all webpack features would still work right? Like lazy loading (code splitting)? — LoveProgramming, Sep 10 '15 at 14:27
Sure. Have a look [here](http://webpack.github.io/docs/code-splitting.html) and [here](https://christianalfoni.github.io/react-webpack-cookbook/Lazy-loaded-entry-points.html) for a detailed code base. The important parts are `require.ensure` (CommonJs) or `require` (AMD). — dotcs, Sep 10 '15 at 15:57

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

1 Answers1