Webpack - loader
webpack 1.0.1 juejin.cn/post/684490…
完成webpack1.0.1的配置及操作，就会清楚什么是webpack，什么是模块化开发的概念。通过简单的配置就可以完成打包js文件。而在实际开发中，只完成js文件的打包是远远不够的，你的工程中会使用图片，.svg,.vue，.jsx,预处理语言等各种类型格式的文件。这时需要用到node的loader模块。在webpack定义中，loader导出函数并在转换源模块时调用该函数，最终转换成浏览器识别的通用文件。
webpack loader 中文网站www.webpackjs.com/loaders/
在webpack中文官网推荐的loader有很多，这时配置loader就看具体的业务场景，根据业务场景的不同配置不同的loader。
具体loader配置如下：
module // 当不单纯是打包js文件时，webpack就会在module对象中去查找相应的打包配置
rules // 规则，数组形式。包含的对象就是具体文件类型和使用相应的loader
test // 文件类型，正则表达式。
use // 使用loader
在终端输入 npm install file-loader -D 下载file-loader ⚠️ -D 等价于 --save -dev
这样最基本的处理图片的loader就配置成功了。
Webpack - 静态资源图片
打包完成图片后，你会发现打包图片的名称是字符串形式的出现的，如果想要修改图片名称或者保持原有图片名称，可以在use中去配置options属性来实现自己想要的打包效果。
name:'[name].[ext]' // 保持原有的名称，.[ext]占位符。[hash]占位符，hash字符串，也就是这个图片的字符串。
outputPath // 输出路径，在dist文件夹下生成 images 文件夹并把图片放入其中。
⚠️有一个loader与 file-loader 十分相似，就是 url-loader 。
终端输入 npm install url-loader -D
当终端运行 npm run bundle 后，dist文件并没有输出images文件夹和图片文件，但是图片仍然被打包，这是因为url-loader会把图片打包成base64位的图片到js文件中。但是这种打包方式就会带来一个性能优化的问题，如果图片很小，小于2KB，对于前端性能优化喜闻乐见的是使用base64位图片，这样就会减少一次ajax请求。但是如果图片过大，打包进js文件中，js文件就会过大,导致加载js文件时间过长，用户体验效果差。而url-loader的开发者已经帮助我们解决了这个问题。再次配置ulr-loader的options。
limit // 小于2KB就会打包成base64位的图片，反之会把图片打包移植到images文件夹下。
至此，webpack静态资源图片的loader配置就结束了。
