development(开发环境) 和 production(生产环境) 这两个环境下的构建目标存在着巨大差异。在开发环境中,我们需要:强大的 source map 和一个有着 live reloading(实时重新加载) 或 hot module replacement(热模块替换) 能力的 localhost server。而生产环境目标则转移至其他方面,关注点在于压缩 bundle、更轻量的 source map、资源优化等,通过这些优化方式改善加载时间。由于要遵循逻辑分离,我们通常建议为每个环境编写彼此独立的 webpack 配置。
虽然,以上我们将生产环境和开发环境做了略微区分,但是,请注意,我们还是会遵循不重复原则(Don’t repeat yourself – DRY),保留一个 “common(通用)” 配置。为了将这些配置合并在一起,我们将使用一个名为 webpack-merge
的工具。此工具会引用 “common” 配置,因此我们不必再在环境特定(environment-specific)的配置中编写重复代码。
npm scripts
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
//让npm start
script 中webpack-dev-server
使用 development(开发环境) 配置文件
"start": "webpack-dev-server --open --config webpack.dev.js",
//npm run build
script 使用 production(生产环境) 配置文件
"build": "webpack --config webpack.prod.js"
}
}
{
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
// 默认运行webpack.config.js
"start": "webpack-dev-server --open",
"build": "webpack"
}
//webpack.common.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const webpack = require('webpack')
module.exports = {
entry: {
app: './src/index.js',
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
},
plugins: [
//清理dist文件夹,保证里面只有最新生成的文件
new CleanWebpackPlugin(['dist']),
//生成它自己的 index.html 文件,它会用新生成的 index.html 文件,替换我们的原有文件
new HtmlWebpackPlugin({
title: 'Production'
})
]
}
//webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
//merge
//webpack-merge 工具提供了各种 merge(合并) 高级功能
module.exports = merge(common, {
mode: 'development',
//能够将错误定位到源码,而不是压缩后到代码
//用于develipment环境
//强大的 source map
devtool: 'inline-source-map',
//提供了一个简单的 web server,并且具有 live reloading(实时重新加载) 功能
//改任何源文件并保存它们,web server 将在编译代码后自动重新加载
//浏览器自动刷新
devServer: {
contentBase: './dist'
}
});
//webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
//merge
module.exports = merge(common, {
//webpack v4+ 会默认压缩你的代码
mode: 'production',
//在生产环境中启用 source map,因为它们对 debug(调试源码) 和运行 benchmark tests(基准测试) 很有帮助 //避免在生产中使用 inline-*** 和 eval-***,因为它们会增加 bundle 体积大小,并降低整体性能。 //与开发环境用的不一样
devtool: 'source-map'
});
指定mode
许多 library 通过与 process.env.NODE_ENV
环境变量关联,以决定 library 中应该引用哪些内容。例如,当不处于生产环境中时,某些 library 为了使调试变得容易,可能会添加额外的 log(日志记录) 和 test(测试) 功能。并且,在使用 process.env.NODE_ENV === 'production'
时,一些 library 可能针对具体用户的环境,删除或添加一些重要代码,以进行代码执行方面的优化。从 webpack v4 开始, 指定 mode
会自动地配置 DefinePlugin
:
技术上讲,NODE_ENV
是一个由 Node.js 暴露给执行脚本的系统环境变量。通常用于决定在开发环境与生产环境(dev-vs-prod)下,server tools(服务期工具)、build scripts(构建脚本) 和 client-side libraries(客户端库) 的行为。然而,与预期相反,无法在构建脚本 webpack.config.js
中,将 process.env.NODE_ENV
设置为 "production"
,请查看 #2537。因此,在 webpack 配置文件中,process.env.NODE_ENV === 'production' ? '[name].[hash].bundle.js' : '[name].bundle.js'
这样的条件语句,无法按照预期运行
任何位于 /src
的本地代码都可以关联到 process.env.NODE_ENV 环境变量
import { cube } from './math.js';
if (process.env.NODE_ENV !== 'production') {
console.log('Looks like we are in development mode!');
} function component() {
var element = document.createElement('pre'); element.innerHTML = [
'Hello webpack!',
'5 cubed is equal to ' + cube(5)
].join('\n\n'); return element;
} document.body.appendChild(component());