学习 Webpack: CSS 管理以及打包

Webpack 是一个模块打包器，它可以将多个模块打包成一个文件，从而方便地开发和维护项目。Webpack 最初是一个 JavaScript 打包工具，但是随着时间的推移，它已经成为了一个通用的前端打包工具，可以打包不仅仅是 JavaScript，还可以打包图片、CSS 等前端资源。

CSS 是前端开发中必不可少的一部分，掌握 Webpack 如何管理和打包 CSS，对于提高前端开发的工作效率和项目的可维护性都有很大的帮助。

安装和配置

安装 Webpack 和相关的前置工具，可以参考 Webpack 的官方文档，这里不再赘述。

在项目中使用 CSS，首先需要安装 css-loader 和 style-loader：

npm install --save-dev css-loader style-loader

安装完成之后，修改 Webpack 配置文件，配置 loader：

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

上面的代码主要做了两个事情。第一个是，当 Webpack 加载一个以 .css 结尾的模块时，会使用 css-loader 来加载这个模块；第二个是，在加载完成后，使用 style-loader 将解析出来的 CSS 动态插入到 HTML 页面的 head 中。

使用 CSS

在代码中使用 CSS 相对简单，只需要在 JavaScript 中引入即可：

import './style.css';

在 CSS 文件中使用其他 CSS 文件也和平常一样非常简单：

@import './reset.css';

body {
  font-size: 14px;
}

打包 CSS

Webpack 不仅支持加载、解析 CSS，还支持将多个 CSS 文件打包成一个文件。

在不进行任何配置的情况下，Webpack 会将每个 CSS 文件打包成一个单独的文件，这样不太方便管理，而且也会增加 HTTP 请求的数量。

我们可以使用 mini-css-extract-plugin 来将多个 CSS 文件打包成一个文件：

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

修改 Webpack 配置文件，添加插件：

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',
    }),
  ],
};

通过 MiniCssExtractPlugin.loader，CSS 会被提取成单独的文件，而不是被动态地插入到 HTML 页面的 head 中。filename 和 chunkFilename 是打包后的文件名和 chunk 名。

总结

通过本文的介绍，我们学会了如何使用 Webpack 加载和管理 CSS，并最终将多个 CSS 文件打包成一个文件。这不仅可以提高前端开发的效率，还可以使项目更具可维护性。希望对大家有帮助！

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