Webpack入门，样式处理

ZERO • 2022年11月24日 • 教程 • 阅读 573

除了JavaScript以外，Webpack在打包方面另一个重要的工作就是样式处理。在具有一定规模的工程中，由于手工维护CSS的成本过于高昂，开发者可能会需要更智能的方案来解决浏览器兼容性问题，更优雅地处理组件间的样式隔离，甚至是借助一些更强大的语言特性来满足各种各样的需求。

在《Webpack入门，预处理器》一篇中讲解过style-loader与css-loader，通过JS引用CSS文件的方式打包样式，可以更清晰地描述模块间的依赖关系。然而，当时打包之后并没有输出单独的CSS文件（虽然在源码中使用的单独的CSS文件），通过在浏览器开发者工具查看打包之后的页面中的元素，会发现样式是通过附加style标签的方式引入的。

一般来说，在生产环境下，开发者往往希望样式存在于CSS文件中而不是style标签中，因为文件更有利于客户端进行缓存。Webpack社区有专门的插件：extract-text-webpack-plugin（适用于Webpack 4之前版本）和mini-css-extract-plugin（适用于Webpack 4及以上版本），它们就是专门用于提取样式到CSS文件的。

温馨提示
由于示例工程使用的Webpack版本是5.74.0，所以本篇不在讲解extract-text-webpack-plugin插件的使用。

通过示例来认识一下mini-css-extract-plugin插件。

安装mini-css-extract-plugin插件

npm install mini-css-extract-plugin -D

接下来，修改配置文件

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js',
  },
  mode: 'development',
  module: {
    rules: [{
      test: /\.css$/,
      use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              // 这里可以指定一个 publicPath
              // 默认使用 webpackOptions.output中的publicPath
              // publicPath的配置，和plugins中设置的filename和chunkFilename的名字有关
              // 如果打包后，background属性中的图片显示不出来，请检查publicPath的配置是否有误
              publicPath: './',  
            },
          },  
          'css-loader'
        ],
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
            filename:"index.css" //输出的css文件名，默认以入口文件名命名(例如main.css)
        })
  ]
}

样式的提取是从资源入口开始的，以chunk为单位进行检索。在实际开发中，是多模块的，每个模块都有各自的样式表。对于多样式文件的场景，可以对插件提取的CSS文件使用类似模板的命名方式。

// webpack.config.js
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "[name].js",
  },
  mode: "development",
  devServer: {
    static: {
      directory: path.join(__dirname, "public"),
    },
    compress: true,
    hot: true,
    port: 3000,
    open: true,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: "./",
            },
          },
          "css-loader",
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),
  ],
};