webpack学习笔记（九）拆分开发环境和生产环境配置

在生产环境和开发环境中有许多存在不一致的情况
例如在开发环境中没有必要设置缓存，生产环境还需要设置公共路径等
在开发环境中，追求强大的开发效率和开发功能
在生产环境中，追求更小更轻量级的bundle的打包产物

公共路径

publicPath可以指定应用程序中所有路径的基础路径（给资源加入域名）

环境变量

environment variable可以消除开发环境和生产环境间的差异
首先需要将module.exports改写为返回一个函数，这样子可以使用用户配置时传的参数
例如打包命令npx webpack --env production,那么就可以使用env.production此值为true
将mode配置成mode: env.production? 'production':'development',
效果:生产环境会压缩代码，开发环境不会压缩代码；

terser插件

该插件是webpack开箱即用的插件，但如果你在optimization中配置了minimizer（配置了压缩css代码的插件）,那么需要自己npm一下terser插件，重新配置
安装npm install terer-webpack-plugin -D

const TerserPlugin = require('terser-webpack-plugin')
optimization:{
            minimizer:[
                new CssMinimizerPlugin(),
                new TerserPlugin()
            ],
   }

拆分配置文件

使用两个配置文件来拆分生产环境和开发环境
例如生产环境不需要：
1.输出文件的文字[contenthash]
2.不需要publicPath
3.不需要压缩css与js文件
开发环境不需要
1.devtool:‘inline-source-map’
2.不需要devServer
打包时使用config命令区分
命令npx webpack --config ./config/webpack.config.dev.js
【warning】entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
打包体积过大

performance: {
      // 入口起点的最大体积
      maxEntrypointSize: 50000000,
      // 生成文件的最大体积
      maxAssetSize: 30000000,
    },

npm脚本

每次打包或启动服务时，都需要在命令行里输入一长串的命令。不太方便，需进行优化。

"scripts": {
    "start":"webpack serve -c ./config/webpack.config.dev.js",
    "build":"webpack -c ./config/webpack.config.prod.js"
  },

两个配置文件中存在大量重复代码，所以可以将一些公共的配置抽离出来

webpack.config.common.js一些公共配置

webpack.config.dev.js开发环境

webpack.config.prod.js生产环境
webpack.config.js合并文件
安装npm install webpack-merge

修改命令，文件和加上个–env

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