一键get！手把手带你升级Webpack2.x到Webpack4.x

近年来，随着前端工程化建设的不断推进，Webpack成为了构建前端项目的必备工具之一。然而，随着Webpack版本不断更新，旧版本的Webpack已经逐渐被弃用。因此，很多开发者面临着将项目中的Webpack从2.x升级到4.x的迫切需求。

本次教程将手把手地指导你完成Webpack从2.x到4.x的升级过程，帮助你轻松实现项目的现代化改造。

前期准备

在开始升级之前，我们需要进行一些前期准备工作。

• 确保你已经安装了最新的Node.js和npm。
• 备份你的项目代码，以防升级过程出现问题。
• 更新package.json文件，将webpack的版本号从2.x升级到4.x。

安装新的Webpack版本

接下来，你需要使用npm安装新的Webpack版本。

npm install webpack@4 --save-dev

升级Babel全家桶

Babel是另一个流行的前端构建工具，它与Webpack配合使用，可以将ES6代码编译成浏览器可以识别的代码。因此，在升级Webpack的同时，你也需要升级Babel全家桶。

npm install babel-core@7 babel-preset-env@7 babel-plugin-transform-runtime@7 --save-dev

修改配置文件

在升级了Webpack和Babel全家桶之后，你需要修改项目的配置文件，以适应新的版本。

• 修改webpack.config.js文件

在webpack.config.js文件中，你需要将webpack的版本号从2.x升级到4.x，并修改相应的配置。

const webpack = require('webpack@4');

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader@8'
      }
    ]
  }
};

• 修改.babelrc文件

在.babelrc文件中，你需要将Babel的版本号从7.x升级到8.x，并修改相应的配置。

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

运行Webpack

在修改完配置文件之后，你可以使用以下命令运行Webpack。

webpack --mode=production

验证升级结果

在Webpack运行完成后，你需要验证升级结果是否正确。你可以使用以下命令查看编译后的代码。

ls dist

如果dist目录中存在bundle.js文件，则说明升级成功。

结语

通过本次教程，你已经成功地完成了Webpack从2.x到4.x的升级。升级后的Webpack将更加高效、稳定和强大，帮助你构建出更加现代化和高质量的前端项目。