6

In webpack's getting started page, under the section about webpack-dev-server it mentions -

The dev server uses webpack’s watch mode. It also prevents webpack from emitting the resulting files to disk. Instead it keeps and serves the resulting files from memory.

Does this mean that the bundled file webpack-dev-server compiles is only kept in memory, and I have to also leave webpack --watch running in the background along with the dev-server process to actually save the compiled file to my hard drive?

jchi2241
  • 2,032
  • 1
  • 25
  • 49

2 Answers2

4

webpack-dev-server apparently does not compile your code to disk, but rather keeps it in memory. This means you need to either manually compile your changes, or run webpack --watch in the background as you make changes if you want the changes reflected in your compiled file. I learned the hard way.

After digging a little deeper into the webpack-dev-server docs:

This modified bundle is served from memory at the relative path specified in publicPath (see API). It will not be written to your configured output directory. Where a bundle already exists at the same URL path, the bundle in memory takes precedence (by default).

Community
  • 1
  • 1
jchi2241
  • 2,032
  • 1
  • 25
  • 49
  • Unfortunately for my application. The files are being loaded directly from the disk even though the changes are being marked on memory with [tag:webpack-dev-middleware]. SO, I had to add writeToDisk: true . This way the changes are market on disk and finally I am able to see it on the browser. https://stackoverflow.com/questions/62957820/bundle-created-by-webpack-does-not-reflect-changes-on-the-browser-after-successf – DeWy Sady Jul 17 '20 at 18:00
0

in webpack 5, you can set devServer.devMiddleware.writeToDisk to true. This will compile the files to disk on your target location.

    devServer: {
        port: port,
        static: {
            directory: path.resolve(__dirname,'./dist'),
        },
        devMiddleware: {
            index: "[name].html",
            writeToDisk: true
        },
        open:true,
        // default fall back if browser endpoints do not exist.
        historyApiFallback: {
            index: 'dashboard.html'
        }
    },