【webpack4实战】mini-css-extract-plugin 替换 extract-text-webpack-plugin，平滑过渡有妙招！

2023-11-19 01:08:21

从 extract-text-webpack-plugin 到 mini-css-extract-plugin

Webpack 是一个流行的 JavaScript 构建工具，可以将各种资源（如 JavaScript、CSS、图片等）打包成一个或多个文件。在 webpack3 中，extract-text-webpack-plugin 是一个常用的插件，可以将 CSS 从 JavaScript 代码中分离出来，并生成一个独立的 CSS 文件。然而，在 webpack4 中，extract-text-webpack-plugin 已经被弃用，取而代之的是 mini-css-extract-plugin。

为什么要从 extract-text-webpack-plugin 迁移到 mini-css-extract-plugin？

性能提升。 mini-css-extract-plugin 速度更快，内存消耗更少。
更小体积。 mini-css-extract-plugin 的代码量更少，体积更小。
支持更广泛的 CSS 预处理器。 mini-css-extract-plugin 支持更多种 CSS 预处理器，例如 Sass、Less 和 Stylus。
更灵活的配置。 mini-css-extract-plugin 提供了更灵活的配置选项，可以满足不同的需求。
更好的兼容性。 mini-css-extract-plugin 与 webpack4 的兼容性更好。

如何从 extract-text-webpack-plugin 迁移到 mini-css-extract-plugin？

从 extract-text-webpack-plugin 迁移到 mini-css-extract-plugin 非常简单。只需要按照以下步骤操作即可：

将 extract-text-webpack-plugin 从项目中移除。
安装 mini-css-extract-plugin。
在 webpack 配置文件中添加 mini-css-extract-plugin。

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin()
  ]
};

重新构建项目。

实用的建议和技巧

如果您使用的是 webpack3，并且想迁移到 webpack4，那么建议您使用 webpack-migration-plugin 插件。此插件可以帮助您将 webpack3 的配置迁移到 webpack4。
mini-css-extract-plugin 提供了许多配置选项，可以满足不同的需求。如果您不确定如何配置 mini-css-extract-plugin，可以参考官方文档。
mini-css-extract-plugin 与其他 CSS 预处理器（如 Sass、Less 和 Stylus）也兼容。如果您使用的是这些 CSS 预处理器之一，那么可以参考官方文档，了解如何使用 mini-css-extract-plugin 与这些 CSS 预处理器配合使用。

结语

从 extract-text-webpack-plugin 迁移到 mini-css-extract-plugin 非常简单。只需按照本文介绍的步骤操作即可。mini-css-extract-plugin 具有更好的性能、更小体积、支持更广泛的 CSS 预处理器、更灵活的配置和更好的兼容性。因此，建议您尽早从 extract-text-webpack-plugin 迁移到 mini-css-extract-plugin。