extract-text-webpack-plugin 的使用及安裝

extract-text-webpack-plugin該插件的主要是為了抽離css樣式,防止將樣式打包在js中引起頁面樣式加載錯亂的現象;首先我先來介紹下這個插件的安裝方法:

npm i extract-text-webpack-plugin -D

首先進入項目的根目錄,然后執行以上命令進行插件的安裝,插件安裝完成后,接下來我們要做的就是在webpack.config.js中引入該插件

const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("styles.css"),
  ]
}

該插件有三個參數意義分別如下

use:指需要什么樣的loader去編譯文件,這里由於源文件是.css所以選擇css-loader
fallback:編譯后用什么loader來提取css文件
publicfile:用來覆蓋項目路徑,生成該css文件的文件路徑

webpack打包報錯Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

**webpack打包環境優化的一個點：將css樣式代碼抽離出來。 **

若不抽離，可以在bundle.js中發現css代碼被轉化成節點樣式插入到了body下；這個過程是：style-loader將外部css文件注入到html中，css內容使用css-loader進行解析，轉化成js文件；因為webpack只能識別js文件。

css分離：

使用extract-text-webpack-plugin插件，該插件的主要是為了抽離css樣式,防止將樣式打包在js中引起頁面樣式加載錯亂的現象。

**優點 **

非js文件單獨打包，通過js將文件寫入，可以用來單獨做瀏覽器緩存。
目前工程中大部分用到的還是webpack3+；實際中，在不指定版本的情況下，npm默認安裝的4.0.0版本，這時使用上述插件會報錯：
Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

**原因： **

extract-text-webpack-plugin還不能支持webpack4.0.0以上的版本。

**解決辦法： **

npm install –save-dev extract-text-webpack-plugin@next
會下載到+ extract-text-webpack-plugin@4.0.0-beta.0
然后在打包就正常了