1. 什么是mini-css-extract-plugin?
mini-css-extract-plugin是一个专门用于将打包的CSS内容提取到单独文件的插件
前面我们通过style-loader打包的CSS都是直接插入到head中的
2.mini-css-extract-plugin使用
https://webpack.js.org/plugins/mini-css-extract-plugin/
- 2.1mini-css-extract-plugin安装
npm install --save-dev mini-css-extract-plugin
- 2.2配置mini-css-extract-plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
new MiniCssExtractPlugin({
filename: './css/[name].css',
})
- 2.3替换style-loader
loader: MiniCssExtractPlugin.loader,
注意点: 如果相关文件资源无法显示, 需要根据打包后的结构手动设置公开路径
options: {
publicPath: "xxx"
}
image.png
网友评论