webpack打包css

標籤：code   bin   其他   安裝   改變   ons   ack   參數說明   --   

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