webpack（5）webpack處理css文件

css文件處理-準備工做

(如下項目配置都是基於上一篇webpack(4)的基礎上)
在項目開發中，咱們必然須要添加不少的樣式，而樣式咱們每每寫到一個單獨的文件中。

這裏咱們就在src目錄中建立一個normal.css文件，代碼以下：

body{
    background-color: aqua;
}

代碼很簡單，就是將body設置一個背景顏色，可是此時樣式是不會生效的，由於咱們根本沒有引用它，因此咱們須要在入口main.js中引入css

// 引用css文件
require('./css/normal.css')

 

安裝loader並配置

準備工做處理完後，咱們須要安裝2個loader

• style-loader 將模塊導出的內容做爲樣式並添加到 DOM 中
• css-loader 加載 CSS 文件並解析 import 的 CSS 文件，最終返回 CSS 代碼

安裝命令以下：

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

安裝完成後咱們還須要在webpack.config.js文件中進行配置

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

注意：這裏use列表中的2個loader順序是不能互換的，由於loader 是從右到左（或從下到上）地取值(evaluate)/執行(execute)。因此上面的示例是先執行css-loader加載樣式文件後，再執行style-loader
 

實踐結果

最後咱們使用npm run build就能夠打包成功，而後訪問index.html，頁面呈現的顏色就是咱們normal.css樣式中設置的顏色