webpack 自身只理解 JavaScript， 想讓 webpack 能夠去處理那些非 JavaScript 文件，我們將使用到loader

loader 可以將所有類(lèi)型的文件轉(zhuǎn)換為 webpack 能夠處理的有效模塊，然后你就可以利用 webpack 的打包能力，對(duì)它們進(jìn)行處理。

• 安裝loader

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

• 配置loader

  • 在webpack.config.js文件里配置module中的rules，如下：

    • test 屬性，用于標(biāo)識(shí)出應(yīng)該被對(duì)應(yīng)的 loader 進(jìn)行轉(zhuǎn)換的某個(gè)或某些文件。
    • use 屬性，表示進(jìn)行轉(zhuǎn)換時(shí)，應(yīng)該使用哪個(gè) loader。

    module.exports = {
        /*入口和出口文件可以不用配置，默認(rèn)*/
    
        module:{
          rules:[
            {
              test:/\.css$/,
              use:['style-loader','css-loader']//引入的順序至關(guān)重要,不可改變
            }
          ]
        }
    }
    
    

• 測(cè)試是否打包成功

  • 在src下創(chuàng)建index.css文件

    image

  • 在index.js中引入index.css文件

    require('!style-loader!css-loader!./index.css');

    image

• 進(jìn)行打包后運(yùn)行 npm run dev（之前配置好，詳見(jiàn)第一篇文章：webpack4 基礎(chǔ)配置）

  紅色的背景，控制臺(tái)輸出hello,表示打包成功并加載

  image