Webpack4 使用 mini-css-extract-plugin 提取 CSS

在前端开发中，CSS 是必不可少的一部分。随着项目的不断扩大，CSS 的代码量也会逐渐增加，这时候就需要考虑对 CSS 进行模块化管理，以便于维护和开发。而 Webpack4 使用 mini-css-extract-plugin 插件可以帮助我们实现对 CSS 的模块化管理，提取出单独的 CSS 文件，减小 JS 文件的体积，加快页面的加载速度。本文将详细介绍 Webpack4 使用 mini-css-extract-plugin 插件的使用方法和注意事项。

安装 mini-css-extract-plugin 插件

首先，我们需要安装 mini-css-extract-plugin 插件。可以使用 npm 安装：

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

配置 Webpack4

在 Webpack4 的配置文件中，我们需要做以下几个配置：

1. 引入 mini-css-extract-plugin 插件，将 CSS 提取为单独的文件。

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

1. 配置 MiniCssExtractPlugin 插件。

plugins: [
    new MiniCssExtractPlugin({
        filename: "[name].[chunkhash].css",
        chunkFilename: "[id].[chunkhash].css"
    })
]

其中，filename 表示输出的 CSS 文件名，chunkFilename 表示按需加载时输出的文件名。

1. 配置 CSS 的 loader。

// javascriptcn.com 代码示例
module: {
    rules: [
        {
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,
                "css-loader"
            ]
        }
    ]
}

其中，MiniCssExtractPlugin.loader 表示使用 MiniCssExtractPlugin 插件提取 CSS，"css-loader" 表示解析 CSS 文件。

示例代码

下面是一个简单的示例代码，展示如何使用 mini-css-extract-plugin 插件提取 CSS。

// javascriptcn.com 代码示例
// webpack.config.js

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

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

注意事项

1. mini-css-extract-plugin 插件只能用于 Webpack4，如果使用 Webpack3 或更早版本，则需要使用 extract-text-webpack-plugin 插件来提取 CSS。

2. 需要注意 CSS 文件的引入顺序，因为 Webpack 是按照模块依赖关系进行打包的，如果引入顺序不正确，可能会导致 CSS 样式不生效。

3. mini-css-extract-plugin 插件不支持热模块替换（HMR），因为它是将 CSS 提取为单独的文件，而不是将 CSS 嵌入到 JS 文件中。

4. mini-css-extract-plugin 插件可以与 optimize-css-assets-webpack-plugin 插件一起使用，用于压缩 CSS 文件。

总结

通过使用 mini-css-extract-plugin 插件，我们可以将 CSS 提取为单独的文件，实现对 CSS 的模块化管理，减小 JS 文件的体积，加快页面的加载速度。在使用插件的过程中，需要注意 CSS 文件的引入顺序，以及插件的兼容性和 HMR 的问题。

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