在实现之前我们先来了解以下webpack的打包流程：
- 初始化配置对象，创建compiler对象
- 实例化插件，调用插件的apply方法，挂载插件的监听
- 从入口文件执行编译，按照文件类型调用相应的loader，在合适的时间调用plugin执行，并查找各个模块的依赖
- 将编译后的代码组装成一个个代码块（chunk），并安依赖和配置确定输出内容
- 根据output把文件输出到对象的目录下
可以看出loader在webpack打包的过程中起到了至关重要的作用。
loader到底做了什么？
由于webpack是基于Node的所以webpack只能识别.js文件，所以针对其他的文件就需要转译，这时候就需要用到我们的loader了。
loader是文件加载器，能够加载资源文件，并对这些文件进行特定的处理，然后打包的指定文件中，简单来说就是将webpack传入的字符串做出特定的处理修改。
比如：A.less -> A.css。
loader特点
- loader的执行顺序和代码书写的顺序是相反的，即：最后一个loader最先执行，第一个loader最后执行
- 第一个执行的loader会接收源文件做为参数，下一次执行的loader会接收前一个loader执行的返回值做为参数
loader编写原则
- 单一原则: 每个 Loader 只做一件事；
- 链式调用: Webpack 会按顺序链式调用每个 Loader；
- 统一原则: 遵循 Webpack 制定的设计规则和结构，输入与输出均为字符串，各个 Loader 完全独立，即插即用；
实现loader
需求：将.txt后缀的文件中的内容倒叙并大写。
首先创建webpack-loader文件夹。输入npm init -y初始化。安装webapck和webpack-cli：npm i webpack webpack-cli -D。
在package.json文件下添加脚本
...
"scripts": {
"build": "webpack",
...
}
...
创建test.txt文件夹输入内容：hello world
创建loaders文件夹新建两个loader： 编写两个loader是为了符合单一职责原则。
// loader1，倒叙
module.exports = function (src) {
src = src.split('').reverse().join('')
return src;
}
// loader2，大写
module.exports = function (src) {
src = src.toUpperCase()
// 这里为什么要这么写？因为直接返回转换后的字符串会报语法错误，
// 这么写import后转换成可以使用的字符串
return `module.exports = '${src}'`
}
添加webpack.config.js配置文件
const path = require('path')
module.exports = {
entry: {
app: './test.txt'
},
module: {
rules: [
{
test: /\.txt$/,
use: [
'./loaders/myloader2.js','./loaders/myloader1.js'
]
}
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].txt'
}
}
文件结构
最后：输入命令行npm run build
打包成功，并生成了dist/app.txt文件。
打开app.txt文件在最后找到了转译后的字符：
