【前端工程化】抽离CSS文件，告别style-loader️(8)

在 Webpack 中，默认情况下，CSS 代码会被 css-loader 转换后，交给 style-loader 处理。style-loader 的工作方式是将样式插入到 <style> 标签中，这对于开发模式来说是非常方便的，因为它可以实现热更新。但在生产环境中，我们通常希望将 CSS 代码抽离成单独的文件，以便更好地管理和优化。

为了实现这一目标，我们可以使用 mini-css-extract-plugin。该插件提供了两个主要的功能：

Plugin：负责生成 CSS 文件。
Loader：负责记录要生成的 CSS 文件的内容，同时导出开启 CSS Module 后的样式对象。

1. 安装 `mini-css-extract-plugin`

首先，需要安装 mini-css-extract-plugin：

npm install -D mini-css-extract-plugin

2. 配置 Webpack

在 Webpack 配置文件中，需要引入 MiniCssExtractPlugin 并进行相应的配置。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader?modules' // 开启 CSS Modules]}]},plugins: [new MiniCssExtractPlugin({filename: '[name].[contenthash:5].css' // 配置生成的文件名})]
};

3. 配置生成的文件名

MiniCssExtractPlugin 的 filename 选项用于配置生成的 CSS 文件名。这个选项的工作方式类似于 output.filename，可以根据 chunk 生成的样式文件名进行配置。

例如，配置生成的文件名为 [name].[contenthash:5].css：

[name]：表示 chunk 的名称。
[contenthash:5]：表示根据文件内容生成的哈希值，长度为 5 位。

默认情况下，每个 chunk 对应一个 CSS 文件。如果你希望所有 chunk 的 CSS 代码合并成一个文件，可以使用 [name].css 或者 [contenthash:5].css。

4. 示例

假设你有一个简单的项目结构：

project
├── src
│   ├── index.js
│   └── style.css
├── dist
└── webpack.config.js

src/style.css 文件内容如下：

body {background-color: #f40;
}

src/index.js 文件内容如下：

import './style.css';document.write('Hello, World!');

webpack.config.js 文件内容如下：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {entry: './src/index.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader,'css-loader?modules' // 开启 CSS Modules]}]},plugins: [new MiniCssExtractPlugin({filename: '[name].[contenthash:5].css'})]
};