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'))
})
]
参考地址：