Write template to disk by HtmlWebpackPlugin when using webpack-dev-server

Question

In my project, I use webpack-dev-server to hot reload my application, and I alse use html-webpack-plugin to insert bundle javascript files into template file automatically, but when I use webpack-dev-server , the template files after injected bundles will not be writed to the disk, it will in the memory.

I need the html-webpack-plugin firstly insert bundle files into the template html and then write the templates into dist directory. So how to config it?

I use webpack-dev-middleware :

app.use(middleware(compiler,{
                    publicPath: config.output.publicPath,
                    hot: true,
                    writeToDisk: true
                }));

I thought the writeToDisk can do this, but it doesn't.

Answer 1

webpack-dev-server does not write the bundled files to disk, it only reads it from memory.

To write the bundled files to disk you have to manually use the webpack --watch in the npm scripts of your package.json such that your start script looks like this

"scripts": {
  "start": "webpack --watch && webpack-dev-server --progress --colors",
}