一、前言
我们在使用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、...
