使用NPM Scripts 来管理开发命令

在package.json中scripts字段配置不同环境的命令

npm start： 相当于 npm run start，用于本地开发命令，快速启动本地开发服务

npm run build：用于生产环境打包

你自己可以增加其他命令，例如 npm run test/lint，配置对应的条件就行了

在package.json中使用cross-env来区分环境

使用的cross-env的原因

当我们使用 NODE_ENV = production 来设置环境变量的时候，大多数windows命令会提示将会阻塞或者异常，或者，windows不支持NODE_ENV=development的这样的设置方式，会报错。因此 cross-env 出现了。我们就可以使用 cross-env命令，这样我们就不必担心平台设置或使用环境变量了。也就是说 cross-env 能够提供一个设置环境变量的scripts，这样我们就能够以unix方式设置环境变量，然而在windows上也能够兼容的

{
 // ...
 "scripts": {
 "start": "cross-env NODE_ENV=development webpack --config webpack.config.dev.js --mode development",
 "build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js --mode producation"
 }
 // ...
}

Webpack 区分多环境配置

区分生产环境和开发环境配置，并且封装通用配置，即将 Webpack 配置文件分为：

1. 通用配置webpack.config.base.js;
2. 开发环境配置webpack.config.dev.js;
3. 生产环境配置webpack.config.prod.js;

webpack.config.base.js

通用配置webpack.config.base.js用于通用的配置，例如 entry、loader 和 plugin 等，但是有些需要根据cross-env传入NODE_ENV环境变量进行相关的配置，例如：NODE_ENV=development的时候使用style-loader，而production的时候使用mini-css-extract-plugin的 loader 将生产环境的 CSS 生成单独的 CSS 文件；

// webpack.config.base.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
 // ...
 module: {
 rules: [
 {
 test: /\.css?$/,
 use: [
 {
 loader: isProduction ? MiniCssExtractPlugin.loader : 'style-loader'
 },
 {
 loader: 'css-loader',
 options: {
 importLoaders: 1,
 sourceMap: !isProduction
 }
 },
 {
 loader: 'postcss-loader',
 options: {
 sourceMap: !isProduction
 }
 }
 ]
 }
 ]
 }
 // ...
};

webpack.config.dev.js

开发环境配置webpack.config.dev.js 主要用于开发环境配置，主要是 devServer、API mock 等相关配置，这部分配置注重的是效率，所以打包速度优化也是很重要的。

webpack.config.prod.js

webpack.config.prod.js用于生产环境配置，这部分配置注重的是线上最优打包配置，包括splitChunks、压缩资源、CDN 路径配置（在output配置）等相关配置，还可以在terser-webpack-plugin配置中强制去除一些忘记删除的调试信息：例如 debugger、alert。

Tips：生产环境打包不建议生成 sourcemap，如果生成了也不要上传到线上环境，因为如果 sourcemap 上线之后，等于别人就可以通过 Chrome 等工具直接查看线上代码的源码，这是十分危险的！但是如果你项目使用类似Sentry的 JavaScript 报错收集分析平台，可以将 sourcemap 经过 Webpack 生成，上传到对应的平台之后记得删除上线包中的这些文件，防止上传到线上！

使用 webpack-merge 管理配置文件关系

Webpack 配置文件拆分之后，各自之间都有依赖关系，具体关系如下：

1. webpack.config.dev.js是合并了webpack.config.base.js和自己的配置；
2. webpack.config.prod.js合并了webpack.config.base.js和自己的配置；

要维护这个配置关系，那么就需要使用webpack-merge这个工具库，webpack-merge 主要是提供一个 Webpack 配置对象 Merge 函数，用来合并两个配置，类似于Object.assign函数的功能。

在生产环境打包，一定要配置文件filename的hash，推荐hash配置规则如下：

1. JavaScript 文件使用：[chunkhash]；
2. CSS 文件使用：[contenthash]；
3. 其他静态资源用：[hash]，例如图片、字体等，在url-loader中配置[hash]

生产环境使用mini-css-extract-plugin导出 CSS 文件；

生产环境使用压缩功能，包括 JavaScript、CSS、图片、SVG 等；

合理配置查找路径，减少查找时间，比如设置 alias、添加项目路径、排查node_modules查找等；

在 rule 配置上，有test、include、exclude三个可以控制范围的配置，最佳实践是:

• 只在 test 和 文件名匹配 中使用正则表达式；
• 在 include 和 exclude 中使用绝对路径数组；
• 尽量避免 exclude，更倾向于使用 include。

icon 类图片文件太多使用 CSS Sprite 来合并图片，防止设置url-loader和svg-url-loader的 limit 值不合理，导致 icon 文件都以 Base64 方式引入 CSS 文件中，导致 CSS 文件过大