Split and merge production and development environment configurations

In general, we usually create a webpack.config.js file in the root directory of the project, which contains some basic webPack configuration, With mode we can set whether the current webpack packaging environment is development or production.

The development environment

The code has a certain readability, no compression, the file is larger

The production environment

The code has been compressed, the file is smaller

Normally, we have to set up our Webpack environment manually

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: '[name].js'.path: path.resolve(__dirname, '.. /dist')},plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'})].// Mode defaults to "production"-- > production environment
     mode: "production".// Development environment
    // mode: "development",
}
Copy the code

Disadvantages: Manually switch the environment.

The following split and merge, you can switch

Split and merge

Create a new build folder under the project root directory that contains three files

Write common configuration in webpack.base.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: '[name].js'.path: path.resolve(__dirname, 'dist')},plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'}})],Copy the code

Merge the configuration of the development environment in webpack.dev.config.js

The WebPack-Merge dependency package is used to merge the configuration items of the two files, deconstructing the Smart method from it and renaming it merge

const commonConfig = require('./webpack.base.config')
const { smart: merge } = require('webpack-merge')
const devConfig = {
    mode: "development"
}
// Call the smart method to merge
module.exports = merge(commonConfig, devConfig)
Copy the code

Combine the production environment configuration in webpack.prod.config.js

const commonConfig = require('./webpack.base.config')
const { smart: merge } = require('webpack-merge')
const prodConfig = {
    mode: "production"
}
module.exports = merge(commonConfig, prodConfig)
Copy the code

Modify the code in package.json by creating two directives “build:dev” and “build “.

{
  "name": "learn_webpack"."version": "1.0.0"."description": ""."main": "webpack.config.js"."scripts": {
    "build:dev": "webpack --config ./build/webpack.dev.config.js"."build": "webpack --config ./build/webpack.prod.config.js"
  },
  "keywords": []."author": ""."license": "ISC"."devDependencies": {
    "webpack": "^ 5.24.4"."webpack-cli": "^ 4.5.0." "."webpack-merge": "^ 4.2.2." "
  },
  "dependencies": {
    "html-webpack-plugin": "^ 5.3.1"}}Copy the code

The Webpack-Merge used here is a dependency package for version 4.2.2

The last

  1. Enter NPM run build:dev in the terminal to pack the webpack in the development environment
  2. Enter NPM run build in the terminal to pack webpack in production