webpack2系列step2--CSS

第二篇：CSS的打包處理

CSS的打包，固然也包括預處理如：scss，less的打包處理了。

這裏引入一個概念，加載器（loader）。

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

npm install --save-dev sass-loader(less-loader) node-sass 項目中用到哪一個就用哪一個預編譯的loader,咱們這裏選擇sass

按照步驟安裝以上的loader

自動補全瀏覽器後綴autoprefixer   npm install --save-dev postcss-loader

 

這樣css打包用到的加載器基本都在這裏了

npm install --save-dev webpack-dev-server 自動刷新了而且修改生效了

發的時候咱們並不在乎 style這種形式，可是咱們但願在生產環境下 css能從js文件宏分離出來，咱們但願能css能跟js並行加載，並且能夠避免由於Js文件過大，加載慢而產生的flash of unstyle(無樣式頁面閃爍)。

npm install --save-dev extract-text-webpack-plugin  使用「extract-text-webpack-plugin@2.1.2」插件來分離css代碼。(安裝版本必定要對應，2對應2，3對應3)

完整的代碼截圖以下，看不懂的都有註釋

 

 

 

 

執行npm run build 生成的文件目錄

 

附上源碼路徑：leo的GitHub

https://github.com/suxiaoX/webpack2