Loaders
Loaders是Webpack最重要的功能之一，他也是Webpack如此盛行的原因。通過使用不同的Loader，Webpack可以的腳本和工具，從而對不同的文件格式進行特定處理。
Loader的配置模型：
- test：用於匹配處理文件的擴展名的表達式，這個選項是必須進行配置的；
- use：loader名稱，就是你要使用模塊的名稱，這個選項也必須進行配置，否則報錯；
- include/exclude:手動添加必須處理的文件（文件夾）或屏蔽不需要處理的文件（文件夾）（可選）；
- query：為loaders提供額外的設置選項（可選）。
打包CSS
首先，在src目錄下建立css文件夾，和index.css文件，並編寫如下代碼：
body{
background: burlywood;
color:white;
font-size:30px;
}
建立好后，需要引入到入口文件中，才可以打包。在entery.js的首行加入代碼：
import css from './css/index.css';
接下來我們就需要解析css文件，通過loader，下面到我們下載style-loader和css-loader：
npm install style-loader css-loader --save-dev
配置loader：
第一種方法：
module:{
rule:[
{
test:/\.css$/,
use:['style-loader','css-loader']
}
]
}
第二種方法：
module:{
rules:[
{
test：/\.css$/,
loader:['style-loader','css-loader']
}
]
}
第三種方法:
module:{
rules:[
{
test:/\.css$/,
use:[
{
loader:'style-loader'
},
{
loader:'css-loader'
}
]
}
]
}
這樣我們就配置好了，使用命令webpack打包，就可以看的樣式生效；
分離CSS
目前，打包后的文件中，css是打包在js代碼里面的，這樣不便於以后的維護，所以需要吧CSS從js中分離出來，我們需要使用插件Extract Text Plugin
安裝：
npm install --save-dev extract-text-webpack-plugin
在webpack.config.js中引入
const ExtractTextPlugin = require('extract-text-webpack-plugin');
在Plugins中配置:
new ExtractTextPlugin('css/index.css');
//css/index.css是分離后的路徑位置
修改Loader配置：
module:{
rules:[
{
test:/\.css$/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:"css-loader"
})
}
]
}
Less打包和分離
Less作為目前很火的CSS預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展；
安裝：
npm install --save-dev less less-loader
在webpack.config.js中配置Loader:
module:{
rules:[
{
test:/\.less$/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:[{
loader:"css-loader"
},{
loader:"less-loader"
}]
})
}
]
}
Sass打包和分離
Sass的打包和分離和less的類似，首先下載安裝Sass所支持的服務與loader
安裝：
npm install --save-dev node-sass sass-loader
在webpack.config.js中配置Loader:
module:{
rules:[
{
test:/\.less$/,
use:ExtractTextPlugin.extract({
fallback:"style-loader",
use:[{
loader:"css-loader"
},{
loader:"sass-loader"
}]
})
}
]
}
css自動加載前綴
CSS3是目前作為一個前端必須要掌握的技能，但是由於現在好多瀏覽器還是不兼容CSS3，所以前端需要多寫很丑很難看的前綴代碼；以前都是邊查Can I Use ，邊添加，這樣很麻煩，現在配置一個插件postcss就可以搞定；
PostCSS是一個CSS的處理平台，它可以幫助你的CSS實現更多的功能，但是今天我們就通過其中的一個加前綴的功能，初步了解一下PostCSS。
安裝：
npm install --save-dev postcss-loader autoprefixer
在根目錄下，建立一個postcss.config.js文件：
module.exports = {
plugins:[
require('autoprefixer')
]
}
這就是對postCSS一個簡單的配置，引入了autoprefixer插件。讓postCSS擁有添加前綴的能力，它會根據 can i use 來增加相應的css3屬性前綴。
在webpack.config.js中配置Loader:
{
test: /\.css$/,
use: extractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader',
options: { importLoaders: 1 }
},
'postcss-loader'
]
})
}
消除多余CSS
隨着項目的進展，編寫的CSS會越來越多，有時候需求更改，帶來DOM結構的更改，造成CSS的冗余，所以為了減少CSS文件的體積，需要消除冗余的CSS；使用PurifyCSS可以大大減少CSS冗余；這個插件必須配合extract-text-webpack-plugin來使用；
安裝：
npm install --save-dev purifycss-webpack purify-css
引入glob：
因為需要同步檢查HTML模板，所以需要引入node的glob對象使用，在webpack.config.js文件頭部引入
const glob = require('glob');
引入purifycss-webpack:
const PurifyCssPlugin = require('purifycss-webpack');
配置plugins：
plugins:[
new PurifyCssPlugin({
paths:glob.sync(path.join(__dirname,'src/*.html'))
})
]
參考地址：