写在前面
前面两篇文章，我们介绍了webpack一些概念和简单的配置，对webpack有了一个初步的了解。今天的文章，我们将进入webpack的核心内容。看官网我们会发现，webpack的配置项非常之多，再加上一些自定义的Loader配置和Plugins配置，数目之庞大，不禁让人望而却步。但实际上，我们并不需要把所有的配置项都求全记下来，只需要根据我们的业务场景，在用到某些配置或者loader或者plugin的时候再去熟悉就行了。
Loader
通过之前文章的介绍，我们已经知道了，模块不仅仅是值JS内容，还可能是图片，样式等内容。现在我们先引入一个图片试试打包，如下
// 在前面的demo里面改index.js
var Header = require('./header.js')
var SiderBar = require('./siderBar.js')
var Content = require('./content.js')
var Banner = require('./banner.jpg')
new Header()
new SiderBar()
new Content()
这时候会发现打包报错如下
这是因为webpack是只知道如何打包js文件的，对于图片文件不认识，不知道怎么去打包。既然这样我们就要通过配置去让webpack认识图片文件了，这项配置就是Loader，他可以让webpack认识js之外的模块，下面我们配置一下。
const path = require('path')
module.exports = {
mode: 'development',
entry: {
main: './src/index.js',
},
module: {
rules: [{
test: /.\jpg$/,
use: {
loader: 'file-loader'
}
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
}
注意，这里我们配置的是module项，意思是告诉webpack在遇到不认识的模块时就要按照module里面的规则去打包，其中rules是一个数组，里面可以配置各种loader，配置loader的格式也如我们代码中一样，比较固定的，这里我们对于匹配以jpg结尾的文件使用fille-loader，在打包之前，我们要先对其使用npm安装。安装完成后，我们再执行打包，这时候会发现打包成功了，并且打包后的文件也出现在了dist目录下。理论上我们可以通过webpack Loader处理任何静态资源。
到这里，我们应该知道Loader是什么了，Loader实际上时webapck的一种打包方案，当Webpack遇到不认识的模块时，Loader可以为我们提供相应的打包方案。
下面我们接着改造一下代码，体验Loader，我们把index.js改成下面这样，然后再打包运行
import Banner from './banner.jpg'
var img = new Image()
img.src=Banner
var root = document.getElementById('root')
root.append(img)
这时候我们发现，页面上时可以正常展示出我们打包后的图片的。到这里我想大家对Loader，以及其功能都不会陌生了，后面我们将通过更多的例子去学习更多的Loader。
通过静态资源打包熟练对Loader的使用
file-loader
通过上面的实例，我们学会了用loader来解析jpg格式的图片，但是我们发现，打包出来的图片的文件名确实一长串hash，要想让他保持和源文件一样的文件名，我们也是可以通过配置来解决的
const path = require('path')
module.exports = {
mode: 'development',
entry: {
main: './src/index.js',
},
module: {
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
}]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
}
注意，我们在file-loader的配置项中加入了options配置项，在这里我们可以配置输出文件的文件名，其中[name]为原始的文件名[ext]为原始的文件后缀。这样配置完成后再试试打包，你会发现，打包输出了一个和我们文件名字一模一样的文件。当然了，我们想要打包其他格式的图片，只需要test的正则就可以了。
我们管这种语法叫placeholder，也就是中文讲的占位符。大家查看webpack官网，会发现file-loader的placeholder有多好多种，如下，我们可以根据需要 ，利用占位符对我们的打包文件进行包装。
有时候，我们还需要将图片打包到一个单独的文件夹下面，这个时候我们只需要在options中配置outputPath项就可以了。就像下面这样，我们指定将后缀为jpg、png、gif的文件打包到images文件夹下。
use: {
loader: 'file-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/'
}
}
关于file-loader的介绍就到这里，大家在日常开发的使用中，如果有需要可以去查阅它的官方文档。
url-loader
这里再给大家介绍一个Loader叫url-loader。它的涵盖了file-loader的全部功能，还有自己一些更加强大的功能，下面我来带大家演示一下
首先，我们简单修改一下配置
rules: [{
test: /\.(jpg|png|gif)$/,
use: {
loader: 'url-loader',
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/'
}
}
}]
当我们安装好url-loader以后，执行打包，这时候你会发现打包时成功的。但是我们的图片却没有打包进我们的dist目录下，这时候我们打开index.html却能看到这张图片被渲染了，这是为什么呢？
我们进入到打包出来的bundle.js中，这时候，会发现，在会有一个base64的图片，这是因为，url-loader帮我们把图片自动转成看了base64字符串，然后放到js文件中，而不是生成文件。这样做有以下优缺点
- 图片被打包进js文件中，就可以跟随js一起加载，这样可以减少http请求次数
- 如果图片非常大，就会导致打包出来的js也非常大，导致了页面的加载缓慢。
考虑到以上两点优缺点，我们可以这样解决，为其设定一个范围，假如是体积小的图片，我们可以将其打包为base64放进js文件中，假如是体积大的图片，我们就将其打包进dist目录下的文件夹中。这样就两全其美了，我们做如下配置
options: {
name: '[name]_[hash].[ext]',
outputPath: 'images/',
limit: 2048
}
这样，我们的图片大于2048字节的时候就会打包到文件夹中，小于2048字节就会生成base64打包进js中。试一试吧！
写在最后
本篇为大家讲解了Loader的作用，以及带大家亲自配置了使用了file-loader和url-loader，体会了loader的作用。后面的文章会为大家介绍更多的Loader，比如处理样式文件的loader等。关注我，不迷路...