Webpack Hot Module Reload specify different path to bundle

Question

I'm writing a single page app at the moment and using webpack.

I now want to start using the Hot Module Replacement Plugin because it looks handy.

I have come in to a problem though. It seems that you can't specify where you want the bundle.js file to be.

In my index.html file, I load the bundle.js script up with the following

<script type="text/javascript" src="/static/assets/script/app.bundle.js"></script>

Once the build is complete, I can then deploy the application to the server and everything's fine.

However, when I use the Hot Module Replacement plugin, the app.bundle.js is on the root of the application. So the following works

<script type="text/javascript" src="/app.bundle.js"></script>

For my production configuration, without HMR, I have the following :

// production

entry: [
  './src/project/scripts/entry.js'
],

output: {
  path: path.join(__dirname, '/public/static/assets/script'),
  filename: 'app.bundle.js',
},

And for dev with HMR, I have the following

entry: [
  './src/project/scripts/entry.js',
  'webpack/hot/dev-server',
  'webpack-dev-server/client?http://localhost:8080/'
],

output: {
  path: path.join(__dirname, '/public/static/assets/script'),
  filename: 'app.bundle.js'
},

Of course, when I run dev, it can't find app.bundle.js because the path's are pointing to '/static/assets/script/app.bundle.js' in the index.html.

Is there a way to specify where the app.bundle.js is going to be for the HMR plugin?

Will Falkowski Will Falkowski · Accepted Answer · 2016-06-02T10:29:13

Turns out there is a way. Add the path to the bundle.js in the filename :

output: {
  path: __dirname + '/public',
  filename: 'static/assets/script/app.bundle.js'
}

Webpack Hot Module Reload specify different path to bundle

1 Answers