本文共 915 字，大约阅读时间需要 3 分钟。

一、抽离css文件

目前，css代码被css-loader转换后，交给的是style-loader进行处理。

style-loader使用的方式是用一段js代码，将样式加入到style元素中。

而实际的开发中，我们往往希望依赖的样式最终形成一个css文件

此时，就需要用到一个库：mini-css-extract-plugin

该库提供了1个plugin和1个loader

• plugin：负责生成css文件
• loader：负责记录要生成的css文件的内容，同时导出开启css-module后的样式对象

使用方式：

const MiniCssExtractPlugin = require("mini-css-extract-plugin")module.exports = {       mode: "development",    entry: {           main: "./src/index.js",  // 入口文件        other: "./src/other.js"    },    output: {           filename: "js/[name].[chunkhash:5].js",        publicPath: "/"    //配置根路径    },    module: {           rules: [            {                   test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader?modules"]            }        ]    },    plugins: [        new MiniCssExtractPlugin() //负责生成css文件    ]}

配置生成的文件名

同output.filename的含义一样，即根据chunk生成的样式文件名

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

默认情况下，每个chunk对应一个css文件