webpack4.0 升级实践-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，webpack 对于打包和管理前端资源的作用不可忽视，其中 webpack 4.0 是目前最新的版本。在这篇文章中，我们将介绍如何进行 webpack 3.0 升级到 webpack 4.0，并探讨一些实践中值得注意的地方。

更新 webpack 和相关依赖

首先，我们需要在项目中安装最新的 webpack 和相关依赖。如下所示：

npm install webpack webpack-cli webpack-dev-server --save-dev

其中 webpack-cli 是 webpack 的命令行工具，webpack-dev-server 是用于开发环境的服务器工具。这些模块需要我们升级到最新的版本，以兼容 webpack 4.0。

修改 webpack 配置

在 webpack 4.0 中，有一些配置项已经被移除或者修改了，我们需要相应地更新我们的 webpack 配置。

mode

webpack 4.0 新增了一个 mode 选项，可以指定构建的模式。其有两个可选值：development 和 production。当 mode 设置为 development 时，会进行一些优化，例如在开发过程中不会压缩代码，构建速度较快；当 mode 设置为 production 时，则会进行一系列的优化，例如压缩代码，删除无用的代码等。

// webpack.config.js

module.exports = {
  mode: 'production',
  // ...
}

optimization

webpack 4.0 对于代码的分块和优化做了很多改进，将 optimization 属性作为配置项暴露给开发者。通过 optimization 配置项，我们可以启用各种优化策略，包括代码压缩、拆分代码块等。例如：

// javascriptcn.com 代码示例
// webpack.config.js

module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      }),
      new OptimizeCSSAssetsPlugin({})
    ],
    splitChunks: {
      chunks: 'all'
    }
  },
  // ...
}

webpack.devserver.js 配置

webpack-dev-server 支持 HMR， static 以及 proxy 等配置项，细节升级可到 webpack 或 webpack-dev-server 进行查询。

// javascriptcn.com 代码示例
// webpack.devserver.js

module.exports = {
  contentBase: false, // since we use CopyWebpackPlugin.
  compress: true,
  port: 8080,
  open: true,
  hot: true,
  quiet: true,
  proxy: {
    '/api': {
      target: 'http://localhost:4000',
      pathRewrite: { '^/api': '' }
    }
  },
};

升级后的问题解决

升级后，可能会遇到各种问题，例如打包速度变慢、 HMR 功能失效等。针对这些问题，我们可以采取以下方法进行解决：

加速构建速度

webpack 4.0 在打包时会对代码进行分块处理，这会导致打包速度变慢。我们可以采用以下方法来提高构建速度：

在本地启用多个 CPU 的 parallel-webpack 或者 HappyPack。
保证 loaders 和 plugins 都是最新版本。
使用 thread-loader 将一些 loaders 转成 workerPool 形式。

HMR 失效问题

当升级到 webpack 4.0 后，可能会遇到 HMR 失效的问题，此时我们需要针对不同的情况进行处理：

如果使用的是 Vue.js 框架，可以将它升级到最新版。

如果使用的是 React 框架，在 dev-server 中添加下面代码：

// javascriptcn.com 代码示例
// webpack.devserver.js 中添加以下代码

// ...
devServer: {
  hot: true,
  inline: true,
  overlay: true,
  stats: "errors-only",
  watchOptions: {
    ignored: /node_modules/,
    aggregateTimeout: 300,
    poll: 1000
  }
},
plugins: [
  new webpack.HotModuleReplacementPlugin(),
  // ...
]
// ...

注意，如果是用的 webpack-dev-middleware 设计API服务，需要在 express-config 中添加 devMiddleWare.hot 属性设置为 true。

如果 HMR 依然无法工作，可以尝试升级 webpack-dev-server 到最新版本。

总结

在本文中，我们介绍了如何将 webpack 3.0 升级到 webpack 4.0，并介绍了新版本中的一些重要更新。同时我们也介绍了一些实践中可能会遇到的问题和解决方案。希望本文对于正在升级 webpack 的开发者有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6535ec807d4982a6ebdaa7e5