生产环境构建
在本指南中,我们将深入一些最佳实践,并且使用工具,将网站或应用程序构建到生产环境中。
配置
开发环境(development)和生产环境(production)的构建目标差异很大。
在开发环境中,我们需要具有强大的、实时加载或模块热替换能力的 source map 和 localhost server。
在生产环境中,我们的目标则转向于关注更小的 bundle,更轻量的 source map,以及更优化的资源,以改善加载时间。由于要遵循逻辑分离,我们通常建议为每个环境编写彼此独立的 webpack 配置。
在编写 webpack 配置文件时,为了遵循不重复原则(Don't repeat yourself - DRY),需要保留一个通用(common)配置。有了通用配置,我们就不必在特定环境的配置文件中重复相同的配置代码。
为了将这些配置合并在一起,我们使用 webpack-merge 的工具。
安装 webpack-merge:
npm install --save-dev webpack-merge
然后,将项目根目录下的 webpack.config.js(webpack 默认配置文件)删除,并新建三个配置文件:
- webpack.common.js(通用的 webpack 配置)
- webpack.dev.js(开发环境的webpack 配置)
- webpack.prod.js(生产环境的webpack 配置)
它们的具体内容如下:
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'
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Production'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devtool: 'inline-source-map',