27

I have this output configuration in my webpack.config file:

config = { 
          ...
          output: {
              path: path.resolve(__dirname, 'dist'),
              filename: 'bundle.js',
              publicPath: 'http://localhost:8090/'
          },
... }

The bundle.js is not written to the path specified in path; it is only available through the web server whereas I would like both.

What should I change to have both the file and the web server ?

mguijarr
  • 7,641
  • 6
  • 45
  • 72

3 Answers3

67

[Original]

It appears this is now a built-in option. You can add the following in your webpack config file.

devServer: {
  writeToDisk: true
}

Looks like this was added as of webpack-dev-server version 3.1.10

[2021-11-09] Webpack 5 The syntax appears to have changed in Webpack 5 (you now pass a config option to the specific middleware that handles the assets):

module.exports = {
  devServer: {
    devMiddleware: {
      writeToDisk: true,
    },
  },
};

Webpack v4 docs: https://v4.webpack.js.org/configuration/dev-server/#devserverwritetodisk- Webpack v5 docs: https://webpack.js.org/configuration/dev-server/#devserverdevmiddleware

chris
  • 2,893
  • 3
  • 20
  • 22
29

When you run webpack-dev-server you are not actually bundling and rebuilding the webpack bundle, it is only serving it from memory.

In my experience, the way around this is to have two instances running if you wand to have the actual build as well as the webpack-dev-server. So, in one terminal window have

webpack --watch

running, ( webpack --watch will rebuild the actual bundle ). Then, in another terminal have

webpack-dev-server

running, ( webpack-dev-server will live reaload and serve from memory the new build ).

Nader Dabit
  • 52,483
  • 13
  • 107
  • 91
  • 1
    Ok got it... What is the common practice, then ? Is it to use webpack-dev-server during development and to call webpack only when creating the bundle for production use ? When do people generate the bundle.js file ? – mguijarr Oct 24 '15 at 20:11
  • @mguijarr Though that is exactly what I do most of the time ( use webpack-dev-server during development and then call webpack when I am ready for production ), I am not certain if this is the best practice or if there is a better / more effecient way of doing it, and would appreciate any others view on this. – Nader Dabit Oct 24 '15 at 20:34
  • "In Memory", the keyword I was expecting. Because the bundle is actually being served, but couldn't find it – KeitelDOG Jun 22 '21 at 19:49
  • Okay I am confused. Does this mean that webpack-dev-server is *supposed* to be used with webpack watch? Or is there a way to bundle the files with webpack dev server? – henhen Aug 06 '23 at 10:18
2

This plugin will force webpack-dev-server to also write bundle files, eliminating the need to run two processes in terminal.

gajus/write-file-webpack-plugin

Lounge9
  • 1,213
  • 11
  • 22