webpack4.15.1 学习笔记(五) — 生产环境构建
目录
生产环境构建
development和production的构建目标差异很大。dev中，需要具有实时重新加载或HMR能力的 source map 和 server。而在prod中目标则关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，通常建议为每个环境编写彼此独立的webpack 配置。
虽然将两者做了略微区分，但是还是会遵循不重复原则(DRY)，保留一个通用配置，不必在环境特定的配置中重复代码。再使用 webpack-merge 的工具将这些配置合并在一起。
安装 webpack-merge 将配置代码进行分离：
npm install --save-dev webpack-merge
创建对应环境的配置和通用配置文件：
webpack.common.js 中，设置了 entry 和 output ，并且引入两个环境公用的全部插件。
webpack.dev.js 中，添加了推荐的 source map和devServer。
webpack.prod.js 中，引入了 tree shaking的相关配置。
webpack.common.js
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
new CleanWebpackPlugin({
cleanStaleWebpackAssets: false
}),
new HtmlWebpackPlugin({
title: 'Production'
})
],
};
webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
}
});
webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devtool: 'source-map',
optimization: {
usedExports: true,
minimize: true,
},
});
设置新的scripts 执行命令，运行脚本查看输出结果的变化：
"scripts": {
"devbuild": "webpack-dev-server --open --config webpack.dev.js",
"prodbuild": "webpack --config webpack.prod.js"
},
指定环境
NODE_ENV 是由 Node.js 暴露给执行脚本的系统环境变量。通常用于决定在开发环境与生产环境下，服务器工具、构建脚本和客户端库的行为。然而无法 webpack.config.js 中，直接将 process.env.NODE_ENV 设置为 "production"。
许多库与process.env.NODE_ENV 环境变量关联，决定引用哪些内容。当处于开发环境时，为了分布调试，可能会添加额外的日志和测试。使用 process.env.NODE_ENV === 'production' 时，还可能进行代码优化，从而删除或添加一些代码。可以使用 webpack 内置的 DefinePlugin定义这个环境变量：
webpack.prod.js
const webpack = require('webpack');
module.exports = merge(common, {
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
});
修改入口 index.js ，查看环境变量的值，重新编译和打包后：
// index.js
console.log( process.env.NODE_ENV ); // 执行 devbuild 打印 'development',执行 prodbuild 打印 'production',