Webpack系列——CSS代码的分离

CSS 也可以从主文件中分离出来，默认情况下CSS打包后会被添加在 html 的 style 标签中。

如果 CSS 代码有很多行，那么直接嵌入在 html 文件中是不合适的，我们希望它是以 <link>标签的形式去插入到 head 标签中，也就是外部引入 CSS 文件的形式。

首先安装插件：

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

注意： 它要配合 css-loader 使用, 之前使用的 style-loader 去掉，此项配置更常用用于开发环境，开发模式直接前面的正常配置即可。

// 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']
            }
            ...
        ]
    }
}

注意：除了引入和配置到插件处，还要记得把 'style-loader