在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上也能够兼容的 Webpack 区分多环境配置 区分生产环境和开发环境配置,并且封装通用配置,即将 Webpack 配置文件分为: 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.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 配置文件拆分之后,各自之间都有依赖关系,具体关系如下: 要维护这个配置关系,那么就需要使用webpack-merge这个工具库,webpack-merge 主要是提供一个 Webpack 配置对象 Merge 函数,用来合并两个配置,类似于Object.assign函数的功能。 在生产环境打包,一定要配置文件filename的hash,推荐hash配置规则如下: 生产环境使用mini-css-extract-plugin导出 CSS 文件; 生产环境使用压缩功能,包括 JavaScript、CSS、图片、SVG 等; 合理配置查找路径,减少查找时间,比如设置 alias、添加项目路径、排查node_modules查找等; 在 rule 配置上,有test、include、exclude三个可以控制范围的配置,最佳实践是: icon 类图片文件太多使用 CSS Sprite 来合并图片,防止设置url-loader和svg-url-loader的 limit 值不合理,导致 icon 文件都以 Base64 方式引入 CSS 文件中,导致 CSS 文件过大使用NPM Scripts 来管理开发命令
{
// ...
"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.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
}
}
]
}
]
}
// ...
};