WebPack 中如何提取 CSS 样式表？-JavaScript中文网-JavaScript教程资源分享门户

WebPack 是一个优秀的前端构建工具，它可以将多个模块打包成一个或多个文件，使得前端开发变得更加高效、可维护。在 WebPack 中，我们可以通过配置来实现提取 CSS 样式表。

为什么要提取 CSS 样式表？

在开发中，我们通常会将 CSS 样式写在 HTML 文件的 <style> 标签内，这样虽然方便，但是会导致以下问题：

代码冗余：每个页面都会有相同的 CSS 样式，导致代码冗余。
阻塞渲染：CSS 样式表在页面加载时会阻塞页面的渲染，导致页面加载速度变慢。
难以维护：将 CSS 样式和 HTML 混杂在一起，导致代码难以维护。

因此，我们需要将 CSS 样式表提取出来，以便于优化代码结构、提高页面加载速度和便于维护。

在 WebPack 中，我们可以使用 mini-css-extract-plugin 插件来实现 CSS 样式表的提取。以下是具体操作步骤：

1. 安装插件

首先，我们需要安装 mini-css-extract-plugin 插件：

npm install mini-css-extract-plugin --save-dev

2. 配置 WebPack

在 WebPack 的配置文件中，我们需要引入 mini-css-extract-plugin 插件，并在 module 配置中添加相应的规则：

// javascriptcn.com 代码示例
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css',
      chunkFilename: '[id].[hash].css'
    })
  ]
};

以上配置中，我们添加了一个 CSS 文件的 loader，并使用 MiniCssExtractPlugin.loader 来提取 CSS 样式表。同时，我们还通过 MiniCssExtractPlugin 插件来配置提取后的文件名。

3. 使用提取后的 CSS 样式表

在 HTML 文件中，我们可以通过 link 标签来引入提取后的 CSS 样式表：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My App</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <!-- ... -->
  </body>
</html>

示例代码

以下是一个基本的 WebPack 配置文件，包含了提取 CSS 样式表的配置：

// javascriptcn.com 代码示例
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.[hash].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[hash].css',
      chunkFilename: '[id].[hash].css'
    })
  ]
};

总结

通过配置 WebPack，我们可以很方便地将 CSS 样式表提取出来，从而优化代码结构、提高页面加载速度和便于维护。在实际开发中，我们应该遵循这个原则，将 CSS 样式表与 HTML 分离，以提高代码的可维护性。

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