Webpack 是前端开发中常用的模块打包工具，它可以将多个模块打包成一个文件，减少了网络请求次数，提高了页面加载速度。Webpack2 是一个稳定版本，但是随着技术的不断发展，Webpack3 已经发布了，我们需要及时升级，以便更好地应对项目开发中的需求。本文将介绍在升级 Webpack2 到 Webpack3 过程中可能遇到的坑以及解决方案。
坑1：uglifyjs-webpack-plugin 版本过低
在使用 Webpack2 时，我们通常会使用 uglifyjs-webpack-plugin 插件来压缩代码。但是在升级到 Webpack3 后，可能会遇到以下错误：
Module build failed: TypeError: Cannot read property 'minify' of undefined
这个错误是因为 uglifyjs-webpack-plugin 的版本过低导致的，需要升级到 1.0.0 或以上的版本。
解决方案：
// 安装最新版本的 uglifyjs-webpack-plugin npm install uglifyjs-webpack-plugin@1.7.0 --save-dev
坑2：extract-text-webpack-plugin 插件失效
在使用 Webpack2 时，我们通常会使用 extract-text-webpack-plugin 插件来将 CSS 提取到单独的文件中。但是在升级到 Webpack3 后，可能会遇到以下错误：
Module build failed: TypeError: Cannot read property 'tap' of undefined
这个错误是因为 extract-text-webpack-plugin 的版本过低导致的，需要升级到 3.0.0 或以上的版本。
解决方案：
// 安装最新版本的 extract-text-webpack-plugin npm install extract-text-webpack-plugin@3.0.2 --save-dev
坑3：webpack.optimize.CommonsChunkPlugin 插件被废弃
在使用 Webpack2 时，我们通常会使用 webpack.optimize.CommonsChunkPlugin 插件来提取公共代码。但是在升级到 Webpack3 后，这个插件被废弃了，需要使用新的插件。
解决方案：
-- -------------------- ---- -------
-- ------ ----------------------------------
------------- -
------------ -
------------ -
-------- -
----- -------------------------
----- ---------
------- -----
-
-
-
-坑4：webpack-dev-server 配置变化
在使用 Webpack2 时，我们通常会使用 webpack-dev-server 来启动本地服务。但是在升级到 Webpack3 后，webpack-dev-server 的配置也发生了变化。
解决方案：
devServer: {
contentBase: path.join(__dirname, 'dist'),
compress: true,
port: 9000
}总结
Webpack3 的升级相对来说比较顺利，只需要注意一些细节问题就可以了。我们需要及时升级到最新版本，以便更好地应对项目开发中的需求。希望本文能够帮助大家顺利升级 Webpack2 到 Webpack3，避免因为版本问题而浪费时间和精力。
示例代码
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- ----------------- - ---------------------------------------
----- -------------- - -----------------------------------
-------------- - -
------ -
---- -----------------
------- --------- ------------
--
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- ------- --------
-
-
--
-
----- ---------
---- ---------------------------
--------- ---------------
---- ------------
--
-
-
--
-------- -
--- -------------------
--------- ------------------
---
--- --------------------------------
--- -----------------
--- ------------------------------------
------------ -
-------- -
----- -------------------------
----- ---------
------- -----
-
-
--
--
---------- -
------------ -------------------- --------
--------- -----
----- ----
-
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6550470c7d4982a6eb926c00