MiniCssExtractPlugin 使用方法
时间: 2023-10-22 08:04:03 浏览: 144
MiniCssExtractPlugin 是一个用于将 CSS 提取为独立文件的插件。您可以使用它来将 CSS 文件与 JavaScript 文件分离,以便更好地缓存和优化您的网站或应用程序。
使用 MiniCssExtractPlugin 的方法如下:
1. 在 webpack 配置文件中引入 MiniCssExtractPlugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
2. 在 webpack 配置文件的 plugins 中实例化 MiniCssExtractPlugin
{
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
chunkFilename: '[id].[contenthash].css',
}),
],
}
3. 在 webpack 配置文件的 module.rules 中配置使用 MiniCssExtractPlugin 的 loader
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
],
}
上面的代码会将所有后缀为 .css 的文件使用 MiniCssExtractPlugin 进行处理,并将生成的文件放置到指定的输出目录中。其中,filename 和 chunkFilename 分别表示输出文件和块文件的命名规则。
希望这个回答能帮助到您!
阅读全文