Lesson Weekend

So far we've mostly used webpack to improve our application's performance. This is great for production, but how can we improve our development experience as well?

There are several things we can do:

  • Set up a live development server. This way, any time we make changes to our code, it's automatically rebundled and reloaded.

  • Use source maps for debugging. When we bundle our code and open it in the browser, any errors will refer to the bundle, not to our original source code. With source maps, we can trace the error back to our code, making it easier to debug.

  • Add a linter. A linter will check our code for "lint" such as errors, typos, and "code smells." (A code smell is just what it sounds like: stinky code that may work but is prone to breaking, hard to read, or buggy.)

Webpack Development Server

Let's go ahead and add functionality for the first two to our webpack configuration. We'll add a linter in the next lesson.

$ npm install [email protected] --save-dev

Now let's update webpack.config.js:

webpack.config.js
...

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  devtool: 'eval-source-map',
  devServer: {
    contentBase: './dist'
  },

  ...

};

We specify 'eval-source-map' as a dev tool and then set up a basic configuration for our development server. In order for this tool to work properly on our minified code, we need to update our configuration for UglifyJsPlugin:

webpack.config.js
...
module.exports = {
  ...
  plugins: [
    new UglifyJsPlugin({ sourceMap: true }),
    ...
  ],
  ...
}

If we run $ npm run build, nothing will happen. Our script needs to specify that we're opening webpack-dev-server.

Remember the "scripts" section of package.json? So far we just have a "build" script that runs webpack. Let's add another script:

package.json
...
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --open"
  },
...

If we run $ npm run start in the command line, webpack will automatically spin up a development server at http://localhost:8080/. Try making a small change to the application; for instance, change the background color in styles.css to red. Once you save, the page will be updated instantly.

Development and Production Modes

Now, if you've been paying attention to your build output, you might have noticed this warning:

WARNING in configuration
The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this environment.

This message is clear: we need to set which environment were building our code for: development or production? We can set the mode by altering the command for build in scripts:

package.json
...
  "build": "webpack --mode development",
...

Now if we run $ npm run build again, we'll see that our output has changed substantially.

When we do $ npm run start, webpack will not create a bundle and a dist folder. We need to $ npm run build for that.

If we wanted $ npm run start to use webpack to build our code before starting the development server, we could modify "scripts" like this:

package.json
...
  "scripts": {
    "build": "webpack --mode development",
    "start": "npm run build; webpack-dev-server --open --mode development"
  },
...

We've added a live development server and source maps; in the next lesson, we'll add a linter.