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.

Procora

Answer 1

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

Flick

I think it would work only when I call the start. Does hot reload write the files again to the disk? Basically, I want to give a write-to-disk feature to webpack-dev-server. – Procora

@Procora Yeah, the webpack --watch command writes the files to /dist each time they change, while the dev server reloads the updated src files. – Flick

@Procora Hm, actually, I came across this plugin github.com/gajus/write-file-webpack-plugin. They link to a working webpack config using this plugin to write the bundles to disk here: github.com/gajus/write-file-webpack-plugin/blob/master/sandbox/…. – Flick

I am aware of these plugins. I was looking for the simplest and shortest ways (minimum dependency on 3rd party nom packages) to run webpack based react project. The first approach of yours worked for me. Thanks. However, I think we should have a separate script for production build. – Procora

Answer 2

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

devServer: {
  writeToDisk: true
}

Coverley

This deserves be the selected answer. – Longwinded

2021 update: For 4.0.0, writeToDisk must be located in devMiddleware (Upvote this answer) – Calices

Finally, sanity. – Stomatology

Answer 3

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

devServer: {
  devMiddleware: {
    writeToDisk: true
  }
}

Malave

Answer 4

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.

Dream

Quick question, since I am using web pack-dev-server, can't I enable HMR like this?: start": "webpack --watch & webpack-dev-server --hot --inline --progress --colors". Notice --hot option – Procora

I believe that should work. However, I think if you include the --hot flag in your package.json as well as new webpack.HotModuleReplacementPlugin() in your Webpack config it won't work. Only use one – Dream

By just adding --hot, its woking. ;) – Procora

I'm running webpack --watch and my files are only compiling on the first build. Subsequest builds don't show up. Any advice? – Sepsis

Answer 5

webpack-dev-server serve files from memory, you can replace webpack-dev-server with webpack-simple-serve, it use webpack's watch feature, write the compiled files to disk and use serve-handler to serve.

Coagulant