使用ExtractTextPlugin插件抽取樣式

webpack在打包資源的時候，會將資源文件轉換成javascript代碼，來實現與其餘模塊的合併。在打包css文件時，用JS代碼引入樣式的方式，會有必定的延時。這就是咱們使用ExtractTextPlugin插件抽取樣式的緣由之一。下面咱們來比較一下這兩種方式的差異。（本文中使用的webpack版本號3.10.0）

1、不使用插件

方式1、直接在JS文件中引入樣式文件

首先咱們編寫代碼，代碼完成後，項目的目錄結構以下：

 

index.hmtl中的代碼：

index.js中經過require方法引入index.css

index.css中的內容以下：

 

 接着，咱們使用npm init命令生成package.json，而後安裝兩個loader：style-loader和css-loader。

 npm install style-loader css-loader --save-dev

而後執行命令

webpack ./index.js bundle.js

最後在項目中會生成一個bundle.js

在瀏覽器中打開index.html，運行結果以下圖：

檢查生成的bundle.js，發現項目中的css文件是經過js代碼生成的。

 

方式2、配置webpack中的webpack.config.js文件

文件目錄結構以下：

index.js中的代碼修改一下，其餘文件與方式一保持一致

新建一個webpack.config.js文件，內容以下：

 

 

接着，咱們使用npm init命令生成package.json，而後安裝兩個loader：style-loader和css-loader。

 npm install style-loader css-loader --save-dev

而後執行命令

webpack

 生成的目錄和結果與方式一徹底一致。

總結：方法二經過配置的方式比方式一靈活、方便，可是並無解決在JS中引入樣式帶來的延遲問題。

 

2、使用插件進行抽取

 項目的目錄結構以下：

先編輯一下webpack.config.js文件，代碼以下：

再編輯一下index.html，經過link引入樣式文件，代碼以下：

index.js中的代碼以下：

index.css中的代碼：

 

 使用npm init命令生成package.json

安裝style-loader和css-loader

npm install style-loader css-loader --save-dev

安裝ExtractTextPlugin插件

npm install extract-text-webpack-plugin --save-dev

安裝webpack到本地項目

npm install webpack --save-dev

執行命令

webpack

 命令執行完後，目錄中多了bundle.js和style.css

查看bundle.js，會發現裏面用js操做css的代碼被移除了

ExtractTextWebpackPlugin解決了用js代碼生成樣式文件的弊端，但美中不足的是，它僅僅幫咱們提取了css文件。咱們須要在頁面中經過手寫代碼引入這個樣式文件，解決這個問題須要其餘插件的幫助。