前言
Webpack 是一个模块打包工具，被广泛应用于前端项目中。Webpack 可以将多个模块打包成一个文件，从而减少了 HTTP 请求次数，加速了页面的加载速度。本文将讲解在不同环境下（开发环境、生产环境）对 Webpack 的配置以及如何根据不同环境做出不同的打包策略。
开发环境
在开发环境中，我们希望能够看到源代码，并且能够方便地进行调试和错误处理。另外，我们不需要进行代码压缩和混淆，以便更好地进行功能测试。因此，在开发环境中，我们需要进行以下几方面的配置：
SourceMap
在开发环境中，我们希望能够快速定位到出错的代码。因此，我们需要使用 SourceMap 功能，在打包后的代码中生成一个映射文件，用于将打包后的代码位置映射回源代码位置。配置如下：
devtool: 'cheap-module-eval-source-map'
HMR
在开发中，我们经常需要修改代码并查看结果。通常情况下，我们需要手动刷新页面来看到更新后的效果，这过程较为繁琐。为了提高效率，我们可以使用热模块替换 (Hot Module Replacement, HMR) 功能，可以使我们修改代码后立即看到更新后的效果。配置如下：
devServer: {
hot: true
},
...
plugins: [
new webpack.HotModuleReplacementPlugin()
]生产环境
在生产环境中，我们需要对代码进行优化，减小打包后的文件大小，加快网页加载速度，提高用户体验。因此，在生产环境中，我们需要进行以下几方面的配置：
代码压缩
代码压缩是提高网页加载速度的重要手段之一，常用的代码压缩工具有 UglifyJS 等。我们可以使用 webpack 自带的 UglifyJS 插件进行代码压缩。配置如下：
plugins: [
new UglifyJSPlugin()
]文件分离
在生产环境中，我们可以将 CSS 样式和 JS 脚本分离成单独的文件，以加快页面加载速度。我们可以使用 ExtractTextPlugin 插件将 CSS 样式文件分离出来，使用 CommonsChunkPlugin 插件将公共的 JS 代码分离出来。配置如下：
-- -------------------- ---- -------
------- -
------ -
-
----- ---------
---- ---------------------------
--------- ---------------
---- ------------
--
-
-
--
---
-------- -
--- --------------------------------
--- -------------------------------------
----- --------
--
-代码版本控制
在生产环境中，我们经常需要更新代码，并且需要确保每次更新都能够成功。为了能够对代码版本进行控制，我们可以在每次部署时，对打包后的文件进行版本号更新。配置如下：
module.exports = {
output: {
filename: '[name].[chunkhash].js'
},
...
}总结
Webpack 的配置是一个重要的前端技能，能够帮助我们更好地对前端代码进行管理和优化。本文介绍了开发环境和生产环境下对 Webpack 的配置实现，希望能够帮助读者更好地进行前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a7ae5a48841e989442c04a