加載css需要用到css-loader和style-loader css-loader將@import 和 url 處理成正規(guī)的ES6 import ,如果@import指向的是一個(gè)外部資源，css-loader會(huì)跳過，而只會(huì)對(duì)內(nèi)部資源做處理。css-loader處理之后，style-loader會(huì)將輸出的css注入到打包文件中。css默認(rèn)是inline模式，且實(shí)現(xiàn)了HMR接口。但inline不太適用于生產(chǎn)環(huán)境(全部輸出在頁(yè)面上)。還需要用extracttextplugin生成一個(gè)單獨(dú)的css文件，但先一步一步來。

一，樣式打包

1.安裝css-loader，style-loader

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

2.修改webpack.config.js

增加一個(gè)一級(jí)子節(jié)點(diǎn)

電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),平面設(shè)計(jì)培訓(xùn),網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

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

電腦培訓(xùn),計(jì)算機(jī)培訓(xùn),平面設(shè)計(jì)培訓(xùn),網(wǎng)頁(yè)設(shè)計(jì)培訓(xùn),美工培訓(xùn),Web培訓(xùn),Web前端開發(fā)培訓(xùn)

test的正則會(huì)匹配.css的文件。use中的執(zhí)行順序是從右到左。loader的執(zhí)行是連續(xù)的，就像管道一樣，先