Having troubles with Webpack Dev Server settings

Question

My project has roughly the following structure:

Webpack puts static assets in the public folder.

    output: {
        path: resolve('public'),
        filename: 'bundle.js'
    },

What I would like to do is to make Webpack Dev Server serve index.html from the src folder, but to request static assets from the public folder. Is this possible? The docs say, put the index.html file in the build folder, but if the dev server can be set up to serve the static assets from the public folder, then there will be no reason to copy index.html in there as well.

I tried the following configuration, but it didn’t work:

in package.json:

webpack-dev-server --inline --history-api-fallback --content-base src

in webpack.config.js:

    output: {
        path: resolve('public'),
        publicPath: '../public',
        filename: 'bundle.js'
    },

Additional info, if it matters: I am also doing code splitting in my router, so that I get a number of smaller bundles (0.bundle.js, 1.bundle.js, etc.) that are requested from the parent bundle (bundle.js) when the app switches to the corresponding route.

What I realized is that the main bundle creates links to the dependent bundles using the publicPath option of the the output parameter of Webpack config. In the example I showed above, the publicPath is /; so if I serve index.html from the public folder and index.html requires bundle.js, then bundle.js will require 0.bundle.js from the same folder. If, on the other hand, I set publicPath to /public, then index.html placed in the public folder will have bundle.js that will require 0.bundle.js from public/public folder.

azangru azangru · Accepted Answer · 2016-08-14T15:22:10

Just wanted to say that although I have not yet found an answer to my original question, I realized that an even better setup is to use HTMLWebpackPlugin, passing to it as a template option my index.html. The plugin will automatically reference my script files, add them into the template, and place the resultant html in the output path (public folder).

Couldn’t be happier with it!

Having troubles with Webpack Dev Server settings

1 Answers