引入
对于之前的案例----隔行变色，如果我们要自定义一些css样式怎么办，传统的方法是在外部定义css,在html中引入，这种方式又会引发二次请求如果css文件较多，我们就要不停引入，在学了webpack之后我们知道weback可以帮助我们打包各种资源，利用webpack打包即可解决我们的问题，但是webpack本身是不支持css,jpg等文件的，只所以能够打包各种资源是因为loader的介入 loader译为装载器，加载器。 接下来介绍几个常用的loader
处理CSS
1.cnpm i style-loader css-loader -D
2.在webpack.config.js添加一个节点，module该节点用于配置所有第三方模块加载器 在该节点添加rules数组用于配置所有第三方模块匹配规则
.
.
.
module:{
rules:[
//test 正则匹配文件
//use 指定loader处理
{
test:/.css$/,use:['style-loader','css-loader']
//loader传入参数
test:/.css$/,use:[
{
loader:'style-loader',
options:{
insertAt:'top'//css插入到文档最顶部方便我们自定义样式
}
},
'css-loader'
]
}
]
}
}在rules里面 test正则匹配要处理的文件，use指定通过哪些loader进行处理。 loader规则： loader调用规则是从右到左调用，先调用后面的loader每一个loader执行完毕后都会将结果提交给下一个loader进行处理，当处理完毕后交给webpack进行整合打包。如本例使用了css-loader和style-loader
示例---自定义css改变body背景颜色 index.css
代码语言：javascript复制body{
background-color: bisque;
}main.js
代码语言：javascript复制//导入jquery
import $ from 'jquery'
//导入样式
import './css/index.css'
$(function(){
$('li:odd').css('backgroundColor','blue')
$('li:even').cs('backgroundColor','gray')
})控制台运行 npm run dev 后正常展示。
处理SASS
1.安装sass-loader cnpm i sass-loader -D 发现三个依赖项
执行下面命令 cnpm i node-sass sass fibers -D
2.配置loader规则
代码语言：javascript复制.
.
.
module:{
rules:[
//test 正则匹配文件
//use 指定loader处理
{
test:/.css$/,use:['style-loader','css-loader']
},
//sass配置
{
test:/.scss$/,use:['style-loader','css-loader','sass-loader']
}
]
}
}url-loader
我们的项目难免会使用到图片，如下给body设置背景图片
代码语言：javascript复制body{
background: url('../images/logo.png');
li{
list-style: none;
}
}打包时却报错了
这是因为webpack默认无法处理css文件中的地址，不管是图片还是字体库等。 这里就的借助url-loader进行处理，url-loader依赖于file-loader cnpm i url-loader file-loader -D
配置loader
代码语言：javascript复制.
.
.
module:{
rules:[
//test 正则匹配文件
//use 指定loader处理
{
test:/.css$/,use:['style-loader','css-loader']
},
{
test:/.scss$/,use:['style-loader','css-loader','sass-loader']
},
{
test:/.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader'
}
//指定存放路径
/*
use:{
loader:'url-loader',
options:{
outputPath:'img/'
publicPath:'http://www.zihanzy.com'//自动加域名前缀
}
}
*/
]
}
}我们这里没有配置file-loader，这是因为file-loader只是url-loader的内部依赖，我们只需下载不用配置
配置完成正常编译 但是打包后的图片资源是一个base64编码后的图片
base64的好处之一就是减少二次请求，但有时候我们并不希望他将所有的图片都转换为base64。
好在loader可以传参，我们可以根据需求设置只将某些图片base64 如下例，当图片小于给定的limit值时(byte)时在对图片进base64
代码语言：javascript复制{
test:/.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=7631'
}这样打包后没有被base64的图片，文件名会变成（hash）值，这是为了防止图片重名 如果我们希望其显示原来的文件名时，需传入如下配置
代码语言：javascript复制{
test:/.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=7631&name=[name].[ext]'
}但是上面的配置在遇到图片重名是会显示不正常，比如我们项目有两个文件夹 images、imgs，这两个文件夹分别放置了两张内容不一样但名称一样的图片 我们在不同的地方引用，最后渲染到浏览器时引用了重名图片的地方都只会显示一张相同的图片，前者覆盖后者，因此当我们需要展示原来的图片名称，又不想遇到图片重名时被替换，我们应该在图片名称前面加几位hash值
{
test:/.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=7631&name=[hash:8]-[name].[ext]'
}html中使用图片
cnpm i html-withimg-loader 解析html编译html中使用的图片
module:{
rules:[
{
test:/.html$/,
use:'html-withimg-loader'
},
{
test:/.(png|jpg|gif)$/,
use:'url-loader'
}
]
}语法校验
cnpm i eslint eslint-loader -D https://eslint.org/ 生成配置文件
./node_modules/.bin/eslint --init排除node_modules .eslintignore文件
代码语言：javascript复制./node_modules...
module:{
rules:[
{
test:/.js$/,
use:{
loader:'eslint-loader',
options:{
enforce:'pre'//强制在在最前面执行
}
}
}
...
]
}暴露全局
cnpm i expose-loader ...
module:{
rules:[
{
test:require.resolve('jquery'),
use:'expose-loader?$'
}
]
}将jquery暴露给window
代码语言：javascript复制import $ from 'jquery'
console.log(window.$)在每个模块注入$对象
此时需要引入webpack插件
代码语言：javascript复制let webpack = require('webpack')
...
plugins:[
new webpack.ProvidePlugin({
//在每个模块注入$
$:'jquery'
})
]
...这样每个模块都可以使用jquery
