提取 webpack 4 中的 CSS 等样式文件

在 webpack 4 中，提取 CSS 等样式文件是一种常见且重要的操作。它可以帮助你将 CSS 文件与 JavaScript 文件分离，提高代码的可维护性和性能。本文将详细介绍 webpack 4 中提取 CSS 文件的配置方法，并提供完整的示例代码。

提取 CSS 文件有以下几个好处：

• 提高代码的可维护性：将 CSS 文件与 JavaScript 文件分离，可以使代码更易于阅读和维护。
• 提高性能：提取 CSS 文件可以减少 HTTP 请求的数量，从而提高页面加载速度。
• 支持按需加载：提取 CSS 文件可以实现按需加载，即只加载当前页面需要的 CSS 文件，进一步提高页面加载速度。

在 webpack 4 中，提取 CSS 文件有两种方法：使用 ExtractTextPlugin 插件或使用 MiniCssExtractPlugin 插件。

使用 ExtractTextPlugin 插件

ExtractTextPlugin 插件是 webpack 官方推荐的提取 CSS 文件的插件。它可以将 CSS 代码提取到一个单独的文件中，并自动将该文件添加到 webpack 的构建结果中。

要使用 ExtractTextPlugin 插件，你需要在 webpack 配置文件中安装并配置该插件。以下是示例代码：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  plugins: [
    new ExtractTextPlugin('styles.css'),
  ],
};

在上面的代码中，`new ExtractTextPlugin('styles.css')`表示将 CSS 代码提取到名为 `styles.css` 的文件中。

使用 MiniCssExtractPlugin 插件

MiniCssExtractPlugin 插件是 ExtractTextPlugin 插件的替代品。它提供了更快的提取速度和更好的代码分割支持。

要使用 MiniCssExtractPlugin 插件，你需要在 webpack 配置文件中安装并配置该插件。以下是示例代码：

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

module.exports = {
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css',
    }),
  ],
};

在上面的代码中，`new MiniCssExtractPlugin({filename: 'styles.css'})`表示将 CSS 代码提取到名为 `styles.css` 的文件中。

在提取 CSS 文件时，还需要注意以下几点：

• 确保你的 CSS 文件中没有使用 `@import` 语句，因为 webpack 无法处理 `@import` 语句。
• 如果你的 CSS 文件中使用了 `url()` 函数，你需要确保 `url()` 函数中的路径是正确的。
• 如果你使用的是 Sass 或 Less 等预处理器，你需要在 webpack 配置文件中安装并配置相应的预处理器插件。