Webpack: How to compile, write on disk and serve static content (js/css) using webpack-dev-server

Question

I want to build my js/css code, write it on disk and serve it using webpack-dev-server in a single command. I don't want to set-up another server for production mode. How do we do it? Sharing my webpack.config.js file content below:

module.exports = {
watch: true,
entry: [
    './src/index.js'
],
output: {
    path: __dirname +'/dist/',
    publicPath: '/dist/',
    filename: 'bundle.js'
},
module: {
    loaders: [
        {
            exclude:/(node_modules)/,
            loader: 'babel',
            query: {
                presets: ['es2015', 'react']
            }
        }
    ]
},
devServer: {
    historyApiFallback: true,
    contentBase: './'
}
};

Please find the start script used in package.json below:

"start": "webpack-dev-server --progress --colors"

I am running "npm run start". Please help.

Answer 1

New webpack-dev-server is released, and it supports writeToDisk option.

devServer: {
  writeToDisk: true
}

Answer 2

With webpack-dev-server v4.0.0+, devMiddleware is used:

devServer: {
  devMiddleware: {
    writeToDisk: true
  }
}

Answer 3

webpack-dev-server uses a "virtual" Express server in conjunction with Sock.js to emulate a server running on your machine. Regarding compilation, webpack-dev-server does recompile the bundle whenever it detects code changes. This recompilation is served from memory, however, as opposed to the project's build directory (or, in your case, the dist directory). From the docs:

Using this configuration, webpack-dev-server will serve the static files in your build folder. It’ll watch your source files, and recompile the bundle whenever they are changed.

Regarding writing to your disk, webpack-dev-server does not do this. This is partially addressed by what's been written above. Additionally, note the following, also from the Webpack 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).

To write to your disk, use the ordinary webpack module. Of course, as your question hints at, manual recompilation after every change is tedious. To address that chore, include the watch flag. From the Terminal, you could execute the command:

$ webpack --watch

I prefer to delegate this to an NPM script, however. Note that the -w flag below is equivalent to writing --watch.

// NPM `scripts` field:
"watch": "webpack -w"

If you want to run webpack-dev-server while also having your changes get recompiled and written to your output directory, you can add an additional NPM script like so:

"scripts": {
  "serve": "npm run watch && npm run start",
  "start": "webpack-dev-server --progress --colors",
  "watch": "webpack -w"
}

Then, in your Terminal, just execute $ npm run serve to accomplish this.

---

If you're interested in the added convenience of automatic reload, you can do so by defining the following within the plugins field of your Webpack config file:

new webpack.HotModuleReplacementPlugin()

Note: This will likely require additional configuration settings for Babel. If I were you, I would take out the query field from your babel loader and, instead, delegate your Babel configuration to an external .babelrc file. A good one to use that is compatible with hot reloading might look like this:

{
  "presets": ["env", "es2015", "react"],
  "plugins": ["react-hot-loader/babel"]
}

---

On a side note, I've created a boilerplate repo for easily starting out projects with my desired structure. The Webpack configuration may of interest to, specifically. In particular, it employs Webpack 2 and includes other build tools like Babel (for transpilation), ESLint (syntax checker) as well as support for CSS/Sass and a variety of other file formats.

Answer 4

You can change your start script definition to this:

"start": "webpack --watch & webpack-dev-server --inline --progress --colors".

This sends the webpack watch-and-rebuild process to the background so that you can also hot-reload your modified modules as you change them with webpack-dev-server.

EDIT:

Either of these plugins may do what you want:

• https://github.com/gajus/write-file-webpack-plugin
• https://github.com/FormidableLabs/webpack-disk-plugin