在webpack中，每個檔案都是一個模組（css、js、html、jpg、less）。對於不同的模組使用不同的載入器.

文章中使用的版本：node：8.11.1，webpack 4.6.0

文章中的配置：安裝 webpack-dev-server

一、直接打包css

1.、安裝載入器

npm install css-loader --save-dev
npm install style-loader --save-dev
npm install extract-text-webpack-plugin --save-dev

2、webpack。config。js的配置

對於css檔案，先使用css-loader轉換，再通過style-loader轉換。然後繼續打包。

use可以為物件或陣列，當為陣列時，它的編譯順序從後往前（！！！）。

module:{
    rules:[
    {
      test:/\.css$/,   
      use:[style-loader","css-loader"]
    }]
}

3.執行

package.json 的配置：

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server   --open  --progress --hot --inline  --mode development",
    
  },
 

npm run dev

可以看到css是通過style標籤引入的。

改變style.css中的檔案。可以看到頁面實時編譯並更新了

1.安裝外掛

npm install css-loader --save-dev
npm install style-loader --save-dev
npm install extract-text-webpack-plugin --save-dev

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

3.執行

此時，main.css檔案需要通過link引入到頁面中。

package.json的配置同上

執行

npm run dev

三、兩種方法的對比