使用 “mini-css-extract-plugin” 提取css到单独的文件

一、前言

我们在使用webpack构建工具的时候，通过style-loader，可以把解析出来的css通过js插入内部样式表的方式到页面中，插入的结果如下：

<style>
.wrapper {
  width:100%;
  height:50px;
}
.container {
  width:1200px;
  margin:0 auto;
}
...
</style>

如果不想使用这种方式，想用外部样式表的方式，那应该怎么做呢？

二、使用插件

这里有两个插件可以用，extract-text-webpack-plugin和mini-css-extract-plugin,使用之后，就可以把css提取到单独的文件。通过配合html-webpack-plugin插件的使用，生成的html就会自动引入css文件啦，开心。

/* 这是提取css的文件，main.css */
.index-wrapper-qpZko {
    width: 220px;
    height: 50px;
}
...

<!-- 这是通过‘html-webpack-plugin’生成的html，会自动加入提取出来的公共css文件 -->
<link href="../main.css?9310f73f2ea21a1d0717" rel="stylesheet"></head>

通过extract-text-webpack-plugin插件

在这里，extract-text-webpack-plugin不是重点，所以只介绍一下该插件需要注意的几个点：

• 如果是默认添加，不指定版本，则添加该插件只支持webpack 3
• 如果是需要需要添加其他webpack版本的支持，需要特别指定版本

# for webpack 4
npm install --save-dev extract-text-webpack-plugin@next

# for webpack 3
npm install --save-dev extract-text-webpack-plugin

# for webpack 2
npm install --save-dev extract-text-webpack-plugin@2.1.2

# for webpack 1
npm install --save-dev extract-text-webpack-plugin@1.0.1

接下来，来看看mini-css-extract-plugin插件，这个是官方推荐的。

通过mini-css-extract-plugin插件

mini-css-extract-plugin插件也是用来提取css到单独的文件的，该插件有个前提条件，只能用于webpack 4及以上的版本，所以如果使用的webpack版本低于4，,那还是用回extract-text-webpack-plugin插件。

直接来吧，优点啥的，自己上GitHub看看哈。

添加依赖

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

webpack配置

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        })
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
              use: [
                  MiniCssExtractPlugin.loader,
                  "css-loader"
              ]
            }
        ]
    }
}

这里还是要提醒一下，如果只有一个入口filename写不写硬编码都没关系，因为就只有一个入口，但如果有多个入口，那就不能使用硬编码了，不然后面入口生成的css文件会覆盖前面生成的。这是我之前在extract-text-webpack-plugin踩过的坑。

三、最后

是的，到此，mini-css-extract-plugin的基本使用就这么些了，要看更多的使用，还是看官方介绍哈。

好了，继续研究其他CSS相关的知识。rem、postcss、sass、less、...