Create Separate webpack Configs for Development and Production with webpack-merge
The development and production modes in webpack optimize the output in different ways. In development mode, the focus is on faster builds and a better developer experience. In production mode, the focus is on highly optimized bundles, leading to a better user experience. The good news is, we can have both. In this lesson, we'll separate our webpack config into two configurations and update our scripts to run the right config for our needs.
Instructor: [00:00] Right now, we have two scripts in our package.json that both run webpack. One uses the configuration as-is, and the other one starts to override settings, where here, we're taking the default mode from the config, and we're overriding it with development.
[00:13] As our webpack config gets more and more complicated, we have more chances that we're going to want to override things for our development build versus a production build, and vice-versa. It would be nice to maintain two separate configs without duplicating any of the settings that are shared between the two.
[00:28] We're going to start by installing webpack-merge. We'll npm i -d webpack-merge. From here, we're going to go in, and we're going to rename our webpack config file. This is going to be webpack.config.base.js.
[00:55] Then I'm going to add a new file. This'll be webpack.config.dev.js. Then I'm going to create one more. That'll be webpack.config.prod.js. Now, we have a base config, which is basically everything that we have here.
[01:19] We have our entry output module, our Babel loader rules, and our HTML webpack plugin. Then we have two empty files that are going to act as our specific dev and production configs. I'm going to take the mode setting out of our base config, and then I'm going to close this file.
[01:37] Then in my dev config, and here, I'm going to define a const called merge. Here, I'm going to require the package that we just installed, webpack-merge. Then I'm going to define another constant we'll call baseConfig.
[01:56] That's going to be a require for our webpack.config.base. Then we need export a webpack configuration. We'll do a module.export, and we're going to call our merge function that we just imported.
[02:15] The first argument is going to be our base config. Then we want to merge that with an object that represents our dev-specific overrides. For now, the only setting we would need to override for a particular environment is mode.
[02:28] We'll pass in mode. We'll make the value development. Then we can save that. Now, I'm going to select all of this and copy it. Then in my webpack.config.prod.js, I'll just paste that all in, and then update mode to be production.
[02:48] Now that we have these specific config files, we need to update our package.json to use them. In package.json, in build, I'm going to add a flag to webpack called config. That's going to point to our production config file.
[03:05] webpack.config.prod.js, and then down here in the dev script, where I'm overriding mode, I no longer need to do that. I do need to specify the config. Again, I'll add the config flag, webpack.config.dev.js. I'll save that.
[03:28] Then in my terminal, if I do an npm run build, and then I look at the output from that, we'll see that everything's been minified. Now, if I go back into the terminal and npm run dev, it's going to run in watch mode because of this flag.
[03:51] I can still look at the output. We'll see that it's not minified, so I know it's using that development config file. Then I can hit Control+C to get out of watch mode. Now, our webpack configuration is spread across three different files.
[04:10] We have one place where we can put all of our shared settings, regardless of whether we're building for development or production. Then we have a separate config file, where we can put dev-only settings. Then we have the same thing for production.