第 10 课：根据环境构建

背景

开发环境和生产环境的构建目标差异很大。

在开发环境中，我们需要考虑更多的是开发和调试的便利性。比如开发环节我们需要一个本地服务器来承载我们的页面和资源，最好可以做到修改代码，实时看到页面刷新。当然如果有热加载的功能，代码改动页面局部刷新就更完美了。当我们调试代码的时候，我们希望调试器能方便地定位到源代码所在的行列号，而不是定位到已被压缩工具处理的面目全非的代码行列号。

生产环境中，我们考虑更多的是更小的代码体积，更优的缓存策略，更快的加载速度。因此代码的压缩是必不可少，长效的缓存策略也是推荐采用的。

截然不同的构建目的，决定了我们有必要根据环境来分离 Webpack 配置，构建不同的资源包。

通用配置文件

上节教程中，我们已经创建了通用的配置文件 webpack.config.base.js，现在我们将一些需要在不同环境下进行特殊配置的内容剔除，只保留通用的部分，更新后的 webpack.config.base.js 内容如下：

const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const StyleLintPlugin = require("stylelint-webpack-plugin");
const SpritesmithPlugin = require("webpack-spritesmith");
const { templateFunction } = require("./util");