今天要和大家分享的webpack的插件extract-text-webpack-plugin。我們先聊聊webpack的一個打包機制，webpack本來只能能打包處理.js文件，但是通過強大的loader之后，可以打包處理各種類型的文件。比如：.css文件等。
表面上webpack通過loader可以打包各種文件了，已經完美了。但是在某些場景中也存在着問題的，比如我們的css的內容都被打包到bundle.js里面了。在生產環境中我們通常會利用瀏覽器的緩存來提高用戶體驗，用上了webpack的hash（正常js文件hash類型會使用chunkhash）。
那么問題來了：
我只要修改了js部分的代碼，那么我的css模塊也會被重新打包，被當成css模塊也有內容修改。
或者只修改了css模塊，js模塊是沒有變化的，但是他們都是在一個bundle中，所以都會被認為都有修改。
解決方案：
思路：將css模塊和js模塊分開打包，換句話說把css代碼從js文件中抽離出來，單獨出一個模塊。
方法：extract-text-webpack-plugin插件
用法說明：
ExtractTextPlugin基本參數說明：
filename：生成文件的文件名，可以包含 [name], [id], [contenthash]
allChunks：當為false的時候，只會提取初始化的時候引入的css,當allChunks屬性為true時，會把異步引入的css也提取出來。
ExtractTextPlugin.extract基本參數說明：
use:指需要什么樣的loader去編譯文件
fallback: 這里表示不提取的時候，使用什么樣的配置來處理css
publicfile:用來覆蓋項目路徑,生成該css文件的文件路徑
上代碼：
在webpack的配置中添加如下代碼
const ExtractTextPlugin = require("extract-text-webpack-plugin"); //記得先install該模塊
module: {
rules: [
{
test: /\.vue$/, loader: 'vue-loader', options: { loaders: { scss: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader!sass-loader' }) css: ExtractTextPlugin.extract({ fallback: 'vue-style-loader', use: 'css-loader' }), } } }, { test: /\.css$/, use: ExtractTextPlugin.extract({ //css的提取 fallback: "style-loader", use: "css-loader" }) }, { test: /\.scss$/, use: ExtractTextPlugin.extract({ //css的提取 fallback: "style-loader", use: ['sass-loader','postcss-loader'] }) } ] }, plugins: [ new ExtractTextPlugin({ filename: 'css/[name].[contenthash].css', allChunks: true }) ]
要點說明：
1、在loader中，對.vue文件也做css的抽離。讓.vue組件中的所有的css也能正常抽離出來。
2、plugins中ExtractTextPlugin的allChunks要設置成true，然后配合上要點1，這樣就可以順利的將所有vue組件中的css都提取出來。
注意：在webpack4中，建議用mini-css-extract-plugin替代。更多mini-css-extract-plugin的使用方法請查看：https://www.npmjs.com/package/mini-css-extract-plugin
————————————————
版權聲明：本文為CSDN博主「No Bug !」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_41134409/article/details/88416356