这个适应新版本webpack4.0以上,太难了
参考官方文档,不仅让我大声呼喊,官方牛逼
MiniCssExtractPlugin
本插件会将 CSS 提取到单独的文件中,为每个包含 CSS 的 JS 文件创建一个 CSS 文件,并且支持 CSS 和 SourceMaps 的按需加载。
本插件基于 webpack v4 的新特性(模块类型)构建,并且需要 webpack 4 才能正常工作。
与 extract-text-webpack-plugin 相比:
- 异步加载
- 没有重复的编译(性能)
- 更容易使用
- 特别针对 CSS 开发
快速开始
首先,你需要安装 mini-css-extract-plugin
:
npm install --save-dev mini-css-extract-plugin
建议 mini-css-extract-plugin
与 css-loader
一起使用。
之后将 loader 与 plugin 添加到你的 webpack
配置文件中。 例如:
style.css
body {
background: green;
}
component.js
import ‘./style.css‘;
webpack.config.js
const MiniCssExtractPlugin = require(‘mini-css-extract-plugin‘);
module.exports = {
plugins: [new MiniCssExtractPlugin()],
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, ‘css-loader‘],
},
],
},
};