【前端工程化】五：webpack5快速入门（三）

区分打包环境

由于我们在不同环境下的配置不同，所以我们需要将不同环境的配置分别写在不同的文件中，并提取公共配置；

对于不同环境下，我们传入不同的参数；

"scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "serve": "webpack serve",
    "build2": "webpack --config ./config/webpack.common.js --env production",
    "serve2": "webpack serve --config ./config/webpack.common.js --env development"
},

// webpack.common.js

module.exports = (env) => {
   
    const isProduction = env.production 
    return {
   
		...config
    }
}

合并生成，开发环境配置

npm install webpack-merge -D

// webpack.common.js
const {
    merge } = require('webpack-merge')
const prodConfig = require('./webpack.prod')
const devConfig = require('./webpack.dev')

module.exports = (env) => {
   
  const isProduction = env.production
  // 为了让配置文件也能拿到process.env.NODE_ENV
  process.env.NODE_ENV = isProduction ? 'production' : 'development'
    
  // 依据当前的打包模式来合并配置
  const config = isProduction ? prodConfig : devConfig
  const mergeConfig = merge(commonConfig, config)
  return mergeConfig
}

process.env.NODE_ENV可以在我们的项目中的js去使用，但是配置文件中没办法使用，所以我们在webpack.common.js中去手动赋值，process.env.NODE_ENV可以获取到当前的打包模式；

// babel.config.js
const presets = [
  ['@babel/preset-env'],
  ['@babel/preset-react'],
]

const plugins = []

// 依据当前的打包模式来决定plugins 的值 
const isProduction = process.env.NODE_ENV === 'production'
if (!isProduction) {
   
  plugins.push(['react-refresh/babel'])
}

module.exports = {
   
  presets,
  plugins
}

代码拆分方式

背景： 如果将所有的js放入一个文件加载，那么首页加载的时候会将所有的代码，包括未使用到的代码都会加载，会造成首屏的性能问题；

注意：mode为production的时候会默认将注释剥离，多打包出一个LICENSE.txt文件，需要单独配置TerserPlugin插件的extractComments为false将注释取消；

const TerserPlugin = require