webpack-css-plugin

什么是 mini-css-extract-plugin

​​mini-css-extract-plugin​​​ 是一个专门用于将打包的 CSS 内容提取到单独文件的插件，前面我们通过 ​​style-loader​​​ 打包的 ​​CSS​​​ 都是直接插入到 ​​head​​ 中的

使用 mini-css-extract-plugin

官方文档：​​https://webpack.js.org/plugins/mini-css-extract-plugin/​​

安装 mini-css-extract-plugin

npm install --save-dev mini-css-extract-plugin

配置 mini-css-extract-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

new MiniCssExtractPlugin({
    filename: 'css/[name].css',
}),

替换 style-loader

这一步的目的就是将打包好的 css 文件引入到 html 的 head 标签当中：

loader: MiniCssExtractPlugin.loader

webpack 打包之后效果如下图所示：

注意点：如果相关文件资源无法显示，需要根据打包后的结构手动设置公开路径，配置项如下：

options: {
    publicPath: "./images"
}