记一次webpack3升级webpack4的踩坑经历

在升级webpack3到webpack4的过程中，我们发现了解决各种依赖关系和版本互相兼容的问题是非常重要的。以下是我们在升级的过程中，遇到的一些常见的问题及其解决方法。

依赖关系和版本

在升级webpack的过程中，重要的一点就是了解Webpack的依赖关系。Webpack的各个版本具有不同的依赖版本，并且Webpack及其相关插件的每个版本之间都有一些版本兼容性问题。因此，您必须了解自己当前的Webpack版本和相关依赖版本，并查看最新版本的Webpack及其相关依赖的要求和建议版本。

举个例子：
我们的项目使用了以下的依赖的Webpack 3版本：

{
  "devDependencies": {
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
  }
}

我们升级到Webpack 4后,这是我们的升级后的依赖：

{
  "devDependencies": {
    "webpack": "^4.0.0",
    "webpack-cli": "^3.0.0",
    "webpack-dev-server": "^3.0.0",
    "webpack-merge": "^4.1.2"
  }
}

我们可以发现新版本的webpack，cli插件，以及webpack-dev-server插件版本都发生了变化。我们需要保证所有相关的依赖包的版本都是符合要求的。

处理loader和plugin

在升级webpack的过程中，你可能会遇到一些loader或plugin的问题。例如，在升级到Webpack 4之后，ExtractTextWebpackPlugin已被弃用，取而代之的是mini-css-extract-plugin。

示例：处理sass文件

以前Webpack 3中，sass-loader和ExtractTextWebpackPlugin公共工作。但是在Webpack 4中，ExtractTextWebpackPlugin被移除了，你需要使用mini-css-extract-plugin来代替它。

在我们再升级到Webpack 4后，我们升级了我们的依赖版本，并替换了已经不被支持的ExtractTextWebpackPlugin。下面是我们更新后的webpack配置文件的部分代码：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // Entry Statement
  entry: './src/main.js',
  // Output Statement
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      // JavaScript
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      // Sass
      {
        test: /\.s[ac]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { sourceMap: true } },
          { loader: 'sass-loader', options: { sourceMap: true } }
        ]
      }
    ]
  },
  plugins: [
    // ExtractTextWebpackPlugin has been replaced with MiniCssExtractPlugin
    new MiniCssExtractPlugin({
      filename: 'main.css'
    })
  ]
};

如上述示例，我们保证了sass-loader和MiniCssExtractPlugin的兼容性，并将ExtractTextWebpackPlugin替换为MiniCssExtractPlugin。

结论

当升级Webpack 3与Webpack 4时，确保考虑和更新所有依赖版本，包括Webpack和Webpack插件。同时还需要明确新版本下哪些工具的命名和功能发生了变化，并相应的升级你的loader和plugin配置。

一个优秀的Webpack配置文件应该包括所有的功能选项、依赖项和发行代码的选项。升级Webpack可能会牵扯到大量的更改和调试，但是这样会帮助你提高你的代码的性能和兼容性，提高代码的质量。