前言

在上个文章中我们已经成功引入了 css,但是,我们审查元素,发现 webpack 将 CSS 存储在 JS 模块中,对应于页面上我们的 CSS 写在了 style 标签中,如果 css 多了，很容易造成画面闪盾的情况,并且不符合我们日常的使用情况,所以我们需要将 CSS 从 JS 中抽离.

安装插件

我们需要用到MiniCssExtractPlugin

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

编辑 webpakc.config.js

1
2
3
4
5
6
7
8
// add
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// add
new MiniCssExtractPlugin({
  // 对输出的css文件进行重命名
  filename: 'built.css',
});

img

执行 npm run build
我们可以看到dist目录下生成了 built.css 文件,观察dist中的 index.html，里面增加了

1
<link href="built.css" rel="stylesheet" />

到这里,我们已经将 css 文件成功抽离出来了