1、第一種方式

1、安裝css-loader和style-loader

$ cnpm install css-loader style-loader --save-dev

2、引用的時候使用css-loader，讓webpack可以打包css文件

require(‘css-loader!./style.css‘);

3、打包

4、引入style-loader，將樣式通過style標簽寫到head標簽裏

require(‘style-loader!css-loader!./style.css‘);

2、第二種方式

1、引入css文件

require(‘./style.css‘);

2、webpack命令指定css文件的處理方式

$ webpack hello.js hello.bundle.js --module-bind ‘css=style-loader!css-loader‘

3、第三種方式

文件改變的時候自動打包

$ webpack hello.js hello.bundle.js --module-bind ‘css=style-loader!css-loader‘ --watch

4、其他webpack打包時的參數說明

查看打包進度

$ webpack hello.js hello.bundle.js --module-bind ‘css=style-loader!css-loader
 
‘ --progress

看見打包模塊

$ webpack hello.js hello.bundle.js --module-bind ‘css=style-loader!css-loader‘ --progress --display-modules 

打包原因

$ webpack hello.js hello.bundle.js --module-bind ‘css=style-loader!css-loader‘ --progress --display-modules --display-reasons

webpack打包css