New Webpack Development Server Plugin
Tags: webpack, javascript, webdev
Published: 2019-10-08 13:02:11

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](https://github.com/jimfrenette/uiCookbook/tree/master/sidebars) application to demonstrate how to replace [webpack-dev-server](https://github.com/webpack/webpack-dev-server) with the new [webpack-plugin-serve](https://github.com/shellscape/webpack-plugin-serve "A Development Server in a Webpack Plugin") plugin

#### Requirements

Active LTS [Node](https://nodejs.org) version, e.g., version 8.0.0+ or version 10.0.0+. Read the [webpack-plugin-serve](https://github.com/shellscape/webpack-plugin-serve) documentation for more info.

### Demo Application

Start by cloning or [downloading](https://github.com/jimfrenette/uiCookbook/archive/2018-09-sidebars.zip) 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.

![responsive sidebars in flexbox](https://thepracticaldev.s3.amazonaws.com/i/wi7xna4yd0mwbmycga0c.png)

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](https://docs.npmjs.com/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](https://github.com/shellscape/webpack-nano)

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

#### [npm-run-script](https://docs.npmjs.com/cli/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](https://github.com/jimfrenette/uiCookbook/tree/master/sidebars).

### 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](https://github.com/jimfrenette/uiCookbook/blob/master/sidebars/config/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
    

<h5><i class="icon-github"></i> <a href="https://github.com/jimfrenette/uiCookbook/tree/master/sidebars">Source Code</a></h5>

#### Additional Resources

<span class="sprite-wrapper"><i class="sprite react alignleft"></i></span>
[The minimal React, Webpack, Babel Setup: using webpack-plugin-serve](https://github.com/jimfrenette/minimal-react-webpack-babel-setup/tree/plugin-serve) \- Looking for a barebones React Webpack configuration that uses webpack-plugin-serve? Similar to the above, this fork of [Robin Wieruch](https://www.robinwieruch.de/)'s boilerplate project on GitHub has been modified slightly to also use shellscape's new [webpack-plugin-serve](https://github.com/shellscape/webpack-plugin-serve) along with their [webpack-nano](https://github.com/shellscape/webpack-nano) CLI replacement. [Source Code on GitHub](https://github.com/jimfrenette/minimal-react-webpack-babel-setup/tree/plugin-serve)
<span class="clearfix"></span>

Originally published at [jimfrenette.com/2018/12/new-webpack-development-server-plugin](https://jimfrenette.com/2018/12/new-webpack-development-server-plugin/)