2020-05-05 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"

}

-->