webpack在打包資源的時候，會將資源文件轉換成javascript代碼，來實現與其他模塊的合並。在打包css文件時，用JS代碼引入樣式的方式，會有一定的延時。這就是我們使用ExtractTextPlugin插件抽取樣式的原因之一。下面我們來比較一下這兩種方式的差別。（本文中使用的webpack版本號3.10.0）
一、不使用插件
方式一、直接在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代碼生成的。
方式二、配置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中引入樣式帶來的延遲問題。
二、使用插件進行抽取
項目的目錄結構如下：
先編輯一下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文件。我們需要在頁面中通過手寫代碼引入這個樣式文件，解決這個問題需要其他插件的幫助。