Webpack 的MiniCssExtractPlugin的使用

1. 一直难理解的style-loader

象这样：

    module: {
        rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "sass-loader"
                ],
            },
...

其目的是在目标html中加入<style>，并css代码进行复制，这样可能会生成庞大的html...

2. mini-css-extract-plugin

有了这个插件，会生成css文件，并在html中以<link>方式进行引入，使用方法如下：

• 安装：

yarn add mini-css-extract-plugin

• 编辑webpack.config.js

//引入及配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

 plugins: [new HtmlWebpackPlugin(htmlPluginOptions),
        new MiniCssExtractPlugin({ filename: 'app.css' })]

// 配合相应的loader
rules: [
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader"
                ],
            },
...

• 构建生成的html部分如下：

<link href="app.css" rel="stylesheet"></head>