Under the hood, Webpack dev server is a mini Node.js Express server. It uses a library called SockJS to emulate a web socket. The Node.js server listens to when files were changed, and triggers events to react accordingly. Webpack dev server is also a separate package that needs to get install via NPM. $ npm install-save-dev webpack-dev-server + webpack-dev-server@2.9.2 added 165 packages in 10.49s You'll need to tell the Dev Server what to serve. Currently we are serving the index.html file from the root of the directory. In your case, the script webpack-dev-server is already installed somewhere inside./nodemodules directory, but system does not know how to access it. So, to access the command webpack-dev-server, you need to install the script in global scope as well. $ npm install webpack-dev-server -g Here, -g refers to global scope. Now, let's modify our npm scripts to use the new configuration files. For the start script, which runs webpack-dev-server, we will use webpack.dev.js, and for the build script, which runs webpack to create a production build, we will use webpack.prod.js: package.json. Webpack-dev-server # webpack-dev-server (WDS) is the officially maintained development server running in-memory, meaning the bundle contents aren't written out to files but stored in memory. The distinction is vital when trying to debug code and styles.

1. Webpack Dev Server Npm
2. Webpack Dev Server Proxy
3. Webpack Dev Server Not Working
4. Webpack Dev Server Invalid Host Header

In this guide, we'll dive into some of the best practices and utilities for building a production site or application.

This walkthrough stems from Tree Shaking and Development. Please ensure you are familiar with the concepts/setup introduced in those guides before continuing on.

Setup

The goals of development and production builds differ greatly. In development, we want strong source mapping and a localhost server with live reloading or hot module replacement. In production, our goals shift to a focus on minified bundles, lighter weight source maps, and optimized assets to improve load time. With this logical separation at hand, we typically recommend writing separate webpack configurations for each environment.

While we will separate the production and development specific bits out, note that we'll still maintain a 'common' configuration to keep things DRY. In order to merge these configurations together, we'll use a utility called webpack-merge. With the 'common' configuration in place, we won't have to duplicate code within the environment-specific configurations.

Let's start by installing webpack-merge and splitting out the bits we've already worked on in previous guides:

project

webpack.common.js

webpack.dev.js

webpack.prod.js

In webpack.common.js, we now have setup our entry and output configuration and we've included any plugins that are required for both environments. In webpack.dev.js, we've set mode to development. Also, we've added the recommended devtool for that environment (strong source mapping), as well as our simple devServer configuration. Finally, in webpack.prod.js,mode is set to production which loads TerserPlugin, which was first introduced by the tree shaking guide.

Note the use of merge() calls in the environment-specific configurations to include our common configuration in webpack.dev.js and webpack.prod.js. The webpack-merge tool offers a variety of advanced features for merging but for our use case we won't need any of that.

NPM Scripts

Now, let's modify our npm scripts to use the new configuration files. For the start script, which runs webpack-dev-server, we will use webpack.dev.js, and for the build script, which runs webpack to create a production build, we will use webpack.prod.js:

package.json

Feel free to run those scripts and see how the output changes as we continue adding to our production configuration.

Specify the Mode

Many libraries will key off the process.env.NODE_ENV variable to determine what should be included in the library. For example, when process.env.NODE_ENV is not set to 'production' some libraries may add additional logging and testing to make debugging easier. However, with process.env.NODE_ENV set to 'production' they might drop or add significant portions of code to optimize how things run for your actual users. Since webpack v4, specifying mode automatically configures DefinePlugin for you:

webpack.prod.js

Technically, NODE_ENV is a system environment variable that Node.js exposes into running scripts. It is used by convention to determine dev-vs-prod behavior by server tools, build scripts, and client-side libraries. Contrary to expectations, process.env.NODE_ENV is not set to 'production'within the build script webpack.config.js, see #2537. Thus, conditionals like process.env.NODE_ENV 'production' ? '[name].[contenthash].bundle.js' : '[name].bundle.js' within webpack configurations do not work as expected.

If you're using a library like react, you should actually see a significant drop in bundle size after adding DefinePlugin. Also, note that any of our local /src code can key off of this as well, so the following check would be valid:

src/index.js

Minification

Webpack Dev Server Npm

webpack v4+ will minify your code by default in production mode.

Note that while the TerserPlugin is a great place to start for minification and being used by default, there are other options out there:

If you decide to try another minification plugin, just make sure your new choice also drops dead code as described in the tree shaking guide and provide it as the optimization.minimizer.

Source Mapping

Webpack Dev Server Proxy

We encourage you to have source maps enabled in production, as they are useful for debugging as well as running benchmark tests. That said, you should choose one with a fairly quick build speed that's recommended for production use (see devtool). For this guide, we'll use the source-map option in the production as opposed to the inline-source-map we used in the development:

webpack.prod.js

Avoid inline-*** and eval-*** use in production as they can increase bundle size and reduce the overall performance.

Minimize CSS

It is crucial to minimize your CSS for production. Please see the Minimizing for Production section.

CLI Alternatives

Webpack Dev Server Not Working

Some of what has been described above can also be achieved by using the command line. For example, the --optimize-minimize flag will include the TerserPlugin behind the scenes. The --define process.env.NODE_ENV='production' will do the same for the DefinePlugin instance described above. And, webpack -p will automatically invoke both those flags and thus the plugins to be included.

Webpack Dev Server Invalid Host Header

While these shorthand methods are nice, we usually recommend just using the configuration as it's better to understand exactly what is being done for you in both cases. The configuration also gives you more control on fine-tuning other options within both plugins.