webpack自称能够打包任何文件，这句话咋听一下好像在吹牛逼，因为webpack本身只能理解JavaScript。但是由于webpack中有loader的存在，可以将所有类型的文件转换为webpack能够处理的有效模块，然后利用webpack的打包能力对它们进行处理————前提是要有对应的loader存在
Loader特性
- loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照先后顺序进行编译。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
- loader 可以是同步的，也可以是异步的。
- loader 运行在 Node.js 中，并且能够执行任何可能的操作。
- loader 接收查询参数。用于对 loader 传递配置。
- loader 也能够使用 options 对象进行配置。
- 除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。
- 插件(plugin)可以为 loader 带来更多特性。
- loader 能够产生额外的任意文件。
当然，上面这些特性暂时看不明白也没关系，学会如何使用才是重点。所以重点看如何使用Loader
使用Loader
下面是常见的webpack配置的基本结构：
const path = require('path')
module.exports = {
entry: './src/index.js',
output:{
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module:{
...
}
}其中entry用来设置webpack的入口文件，output是用来设置打包后的文件输出位置以及相应的文件名。这里就不详细介绍，下面我们来看一下常见的loader配置：
在文件中配置
const path = require('path')
module.exports = {
entry: './src/index.js',
output:{
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module:{
rules:[
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
{
test: /\.sass$/,
use: ['sass-loader','node-sass']
},
{
test: /\.(png|jp?eg|gif)$/,
use: ['file-loader']
},
{
test: /\.json$/,
use: ['json-loader']
},
{
test: /\.txt$/,
use: ['raw-loader']
}
]
}
}rules数组里面的每个对象都对应着一个匹配规则，从上到下分别匹配.css文件，.sass文件，图片文件，.json文件以及.txt文本文件
另外，在运行之前千万记得要安装对应的依赖，示例：
npm install css-loader style-loader --save-dev直接导入
可以在 import 语句或任何等效于 import 的方式中指定 loader。使用 ! 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析。?后面可以传递参数，例如 ?key=value&foo=bar，或者一个 JSON 对象，例如 ?{"key":"value","foo":"bar"}
import Styles from 'style-loader!css-loader?modules!./styles.css';通过CLI使用loader
示例：webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
以上三种配置方式，第一种应该用的比较多，毕竟配置也比较方便...
总结
在配置loader的时候尽量使用文件进行配置，并且可以在官方文档找到相应的loader，具体的参数传入可以在npm官网上找到，可以根据具体的需求来设置
扫描下方的二维码或搜索「tony老师的前端补习班」关注我的微信公众号，那么就可以第一时间收到我的最新文章。
