我們前面已經學了很多webpack基本的處理情況，一句話總結就是，一個優秀的webpack項目，主要的核心用法就是整合loader和plugin去處理你想要的任何需求。
下面，咱們一起來學學如何用webpack來處理less，sass等預編譯器。先看看如何用webpack處理less。
國際慣例，第一步是安裝：
npm install less less-loader --save-dev
第二步，配置loader項:
{ test: /\.less$/, use: [{ loader: "style-loader" },{ loader: "css-loader" },{ loader: "less-loader" }] }
最后，咱們來寫一個less試試，直接在src/css/目錄下，新建一個pink.less文件並寫一些代碼：
@base :pink; #lessDiv{ width:300px; height:300px; background-color:@base; }
還要在src/index.html中加入一個id名為#lessDiv的div，最重要的一點，不要忘了在src/entry.js中引入pink.less，引入的方法跟引入css文件是一樣的。
不知道大家還記不記的咱們在處理css文件的時候做過一件事情，也就是把css從js中分離出來，因為webpack打包是把css打包進js的，所以我們修改一下loader的配置方式，跟前面的css是一樣的，這里不再贅述，直接上代碼：
{ test: /\.less$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader: "less-loader" }], fallback: "style-loader" }) }
你可以試試，這兩種代碼打包之后會有什么樣的區別，OK，我們npm run server一下，會發現頁面中已經出現了一個粉色的盒子。
那么說完了less，繼續說一下sass。仍舊是安裝，配置。。。不多說，直接上代碼：
npm install node-sass --save-dev npm install sass-loader --save-dev /*如果安裝報錯，可以試一下cnpm或者分開單獨安裝*/
配置loader：
{ test: /\.scss$/, use: [{ loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "sass-loader" // compiles Sass to CSS }] }
跟less一樣編寫一個scss文件寫入sass代碼並且在entry.js中引入，別忘了在index.html中寫個div：
// css/blue.scss $color: blue; #sassDiv { $width: 100%; width: $width; height:200px; background-color: $color; } // index.html加入 <div id="sassDiv"></div> //entry.js中引入 import sass from './css/blue.scss';
同樣的，把sass從js中分離，修改loader配置：
{ test: /\.scss$/, use: extractTextPlugin.extract({ use: [{ loader: "css-loader" }, { loader: "sass-loader" }], fallback: "style-loader" }) }
npm run server后發現藍色的div已經出現。其實大家可以自己去試着寫一下sass的配置。因為跟less甚至之前的css幾乎是一摸一樣的。沒有什么大的區別。那么下面咱們一起看看css3屬性自動加上前綴，極大的方便我們的開發。
自動加前綴，我們需要用到postCss和autoprefixer，那么安裝一下吧：
npm install --save-dev postcss-loader autoprefixer
我們新建一個postcss.config.js，與webpack.config.js同級，並且寫入相關代碼，也就是引入autoprefixer：
module.exports = { plugins: [ require('autoprefixer') ] }
然后把我們之前寫過的css-loader的配置修改一下：
{ test: /\.css$/, use: [ { loader: "style-loader" }, { loader: "css-loader", options: { modules: true } }, { loader: "postcss-loader" } ] }
分離：
{ test: /\.css$/, use: extractTextPlugin.extract({ fallback: 'style-loader', use: [ { loader: 'css-loader', options: { importLoaders: 1 } }, 'postcss-loader' ] }) }
那么，我們隨便在index.css中加上點css3的樣式試試吧。至此，當你npm run build 之后多半會發現既不報錯，但是index.css中也沒有加上相應的前綴。那么你需要在package.json中寫入如下配置：
"browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ]
什么意思呢？也就是全球瀏覽器使用率大於1%，最新的兩個版本並且是ie8以上的瀏覽器。還有更多的參數可以查看這里https://github.com/ai/browserslist#queries。
增加了這個配置之后，再打包就完全沒問題啦。
那么我們下面學習一下如何消除未使用的css，在實際項目中，我們可能會引入很多樣式庫，組件庫，或者隨着項目需求的增加，我們可能會添加一些新的css，而以前的css又不知道有沒有用，也不敢去動，害怕牽一發而動全身。所以我們可以使用一個插件，在打包的時候自動去除未使用的css樣式：
/*PurifyCSS-webpack要依賴於purify-css這個包，所以這兩個都安裝一下，-D是--save-dev的簡寫，i是install的簡寫*/ npm i -D purifycss-webpack purify-css
然后我們引入glod和purifycss-webpack插件：
const glob = require('glob');
const PurifyCSSPlugin = require("purifycss-webpack");
/*引入插件就不多說了，glob是node的一個對象，我們需要在檢查html模板以確定是否用到了css的時候用到glob*/
然后，在plugins里這樣配置：
new PurifyCSSPlugin({ paths: glob.sync(path.join(__dirname, 'src/*.html')), }) /*glob.sync同步獲取指定文件夾下的文件，這里的意思就是獲取src下的所有html文件。有關node的知識不在這里多說，有興趣的大家可以自行去學習*/
配置成功，我們在src/index.css中寫點沒用的代碼試試吧。發現打包后的css中並沒有我們新加的沒用的代碼，成功！