webpack打包css

一、第一種方式

一、安裝css-loader和style-loader

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

二、引用的時候使用css-loader，讓webpack能夠打包css文件 

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

三、打包

四、引入style-loader，將樣式經過style標籤寫到head標籤裏

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

 二、第二種方式

一、引入css文件

require('./style.css');

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

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

三、第三種方式

文件改變的時候自動打包

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

四、其餘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

 五、在package.json中配置別名打包

 "start":"webpack",//start是webpack系統函數名

執行：

$ cnpm start

或者不使用start，自定義如：

 

執行：