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.
Install:
npm i -D webpack-merge
Create a webpack.config.base.jf:
const path = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') module.exports = { entry: './src/index.js', output: { path: path.join(__dirname, 'dist'), filename: 'app.bundle.js' }, module: { rules: [ { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/, options: { presets: ['@babel/preset-env', '@babel/preset-react'] } } ] }, plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })] }
webpack.config.dev.js:
const merge = require('webpack-merge') const baseConfig = require('./webpack.config.base') module.exports = merge(baseConfig, { mode: 'development' })
webpack.config.prod.js:
const merge = require('webpack-merge') const baseConfig = require('./webpack.config.base') module.exports = merge(baseConfig, { mode: 'production' })
Update scripts to adopt changes:
"scripts": { "build": "webpack --config webpack.config.prod.js", "dev": "webpack --watch --config webpack.config.dev.js", "test": "echo "Error: no test specified" && exit 1" }