minicssextractplugin 应用
时间: 2023-11-28 21:49:07 浏览: 105
minicssextractplugin 是一个 webpack 插件,用于将 CSS 提取为独立的文件。下面是 minicssextractplugin 的应用步骤:
1. 安装 minicssextractplugin:
```bash
npm install --save-dev mini-css-extract-plugin
```
2. 在 webpack.config.js 中引入 minicssextractplugin:
```javascript
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
```
3. 在 plugins 中添加 minicssextractplugin:
```javascript
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
})
]
```
其中,filename 表示生成的 CSS 文件名,chunkFilename 表示非入口 chunk 文件的名称。
4. 在 webpack.config.js 中配置 loader,将 CSS 文件转换为模块:
```javascript
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
}
```
其中,MiniCssExtractPlugin.loader 用于将 CSS 提取为独立的文件,css-loader 用于解析 CSS 文件。
5. 运行 webpack 命令,生成 CSS 文件。
使用 minicssextractplugin 提取 CSS 文件可以减少 HTML 文件的大小,加快页面加载速度,提高用户体验。
阅读全文