使用 “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、...