New Webpack Development Server Plugin

I always thought it was odd to use the webpack-cli command webpack-dev-server instead of webpack in my npm script for development. Lo and behold, last month, webpack-plugin-serve was released, a new webpack plugin to use instead of the quirky webpack-dev-server.

I'm using the fairly basic split configuration from my uiCookbook/sidebars application to demonstrate how to replace webpack-dev-server with the new webpack-plugin-serve plugin

Requirements

Active LTS Node version, e.g., version 8.0.0+ or version 10.0.0+. Read the webpack-plugin-serve documentation for more info.

Demo Application

Start by cloning or downloading the uiCookbook repository containing the sidebars application. The following git clone command uses the --branch option to specify the 2018-09-sidebars tag. This tag represents the checksum version of the repo that predates the change to webpack-plugin-serve in the current version of the app.

# clone 2018-09-sidebars tag in uiCookbook repo
git clone https://github.com/jimfrenette/uiCookbook.git --branch=2018-09-sidebars

# change to sidebars directory    
cd uiCookbook/sidebars

Before making any changes, make sure the application builds for you.

# install node_modules    
npm i

# run dev build
npm run dev

The web browser should open with the app loaded in localhost as shown below.

After confirming that the app builds and the dev server is running on localhost, cancel the running process with Ctrl + C.

Replace Packages

Let's remove and replace the npm packages and modules from the application as follows.

Replace the webpack development server. Additionally, remove the write-file-webpack-plugin since it only works with webpack-dev-server.

npm uninstall webpack-dev-server
npm uninstall write-file-webpack-plugin

# install webpack-plugin-serve --save-dev
npm i webpack-plugin-serve -D

Replace the webpack-cli with webpack-nano. This new Webpack CLI is the optimal solution, it's super tiny (~90% smaller than webpack-cli and webpack-command) and allows unlimited custom flags. more info

npm uninstall webpack-cli

# install webpack-nano --save-dev
npm i webpack-nano -D

npm-run-script

In the package.json file, update the scripts.dev and scripts.build properties for webpack-nano to run the builds. All applicable options, e.g., mode and watch will instead be added to the respective configuration files.

package.json

 ...

  "scripts": {
    "dev": "wp --config config/dev.config.js",
    "build": "wp --config config/prod.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

Note that the ellipsis ... in the code snippet above is not a part of the actual code and is there only to denote code that is being skipped and not applicable to the example. To view the entire file, examine the source code.

Webpack Configuration

Since the write-file-webpack-plugin was removed, be sure to remove it from the config file.

dev.config.js

// delete this line:
const writeFilePlugin = require('write-file-webpack-plugin');

The configuration is split across three files located in the config folder. The base.config.js contains code common to both the dev.config.js and prod.config.js configurations. Start by adding the const object to include the webpack-plugin-serve module near the top of the dev.config.js file where the other constants are defined. Under that, create a new instance of Serve named serve that contains our dev server options.

dev.config.js

...

const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');

const serve = new Serve({
  host: 'localhost',
  static: ['./'],
  open: true,
  liveReload: true
});    

Next, update the module.exports as follows. Note that we're setting the mode and watch flags here instead of our npm script.

dev.config.js

...

module.exports = merge(baseConfig, {
  mode: 'development',
  devtool: 'eval-source-map',
  entry: {
    app: ['webpack-plugin-serve/client']
  },
  plugins: [
    serve
  ],
  watch: true
});

Updated dev.config.js file.

Next, in the base.config.js, change the entry.app property value into an array so webpack-merge handles it properly since we added an entry.app property to the dev.config.js in the previous step.

base.config.js

...

  entry: {
    app: ['./js/index.js']
 },    

In the production build config, we're only adding mode: 'production' to the module.exports.

prod.config.js

...

module.exports = merge(baseConfig, {
  mode: 'production',    

That's it. Run the dev build again, this time using the updated configuration.

npm run dev

Source Code

Additional Resources

The minimal React, Webpack, Babel Setup: using webpack-plugin-serve - Looking for a barebones React Webpack configuration that uses webpack-plugin-serve? Similar to the above, this fork of Robin Wieruch's boilerplate project on GitHub has been modified slightly to also use shellscape's new webpack-plugin-serve along with their webpack-nano CLI replacement. Source Code on GitHub

Originally published at jimfrenette.com/2018/12/new-webpack-development-server-plugin