webpack打包--mini-css-extract-plugin

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