以前的我做事很看重目的，后来感觉这样比较累，其实很多事不需要目的。你做一件事，可以就是玩，跟着感觉走是最好的选择。
其实接触项目工程化已经有两年了，然而由于工作的职责大多是写组件，或者研究各种库的应用，实现页面效果，其实对于webpack配置一直没怎么研究。最近有时间研究一下，看了自定义loader的实现，但是不知道用来干吗，那就不妨就随便写点吧。
新建demo01
loader.js
let utils = require('loader-utils')
module.exports = function loader(source) {
const options = utils.getOptions(this)
return `export const data = {title: '${options.title}', list: '${JSON.stringify(source)}'}`
}
这是loader最基本的用法，source参数是文件的字符串。拿到之后你要做什么，就看你的了。
引入loader-utils模块是为了获取webpack配置中的options选项
webpack.config.js
let path = require('path')
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
rules:[
{
test: /\.(txt)$/,
use: [{
loader: path.resolve('./loader'),
options: {
title: '花名册'
}
}]
}
]
}
};
我准备了一个txt文件，内容很简单
张三,20,男|李四,23,女
在main.js中引入
import {data} from './test.txt'
document.write('<h1>' + data.title + '</h1><div>' + data.list + '</div>');
让我们再来明确一下loader到底做了什么事情。
运行
npm run build
这时会生成一个bundle.js文件，看看里面，其实模块会被转换成这样的js
(function(module, __webpack_exports__, __webpack_require__) {
"use strict";
const data = {title: '花名册', list: '"张三,20,男|李四,23,女"'}
__webpack_exports__["a"] = data;
})
猜测一下loader的转换过程，loader的参数是一个字符串，而它返回的也是一个字符串，因为它可能需要提供给下一个loader去处理。(例如css-loader和style-loader)最后的loader输出的应该是js模块的文本形式，被webpack转换成js文件。
优化
上面的例子似乎没什么大的作用，我来改造一下。
let utils = require('loader-utils')
module.exports = function loader(source) {
const options = utils.getOptions(this)
const strList = source.split('|')
const list = strList.map(r => {
const data = r.split(',')
return {
name: data[0],
age: data[1],
sex: data[2]
}
})
return `export const data = {title: '${options.title}', list: ${JSON.stringify(list)}}`
}
loader对字符串进行解析，转化成数组形式
main.js
import {data} from './test.txt'
let list = data.list.map(r => {
return '<li>' + r.name + '/' + r.age + '/' + r.sex + '</li>'
})
document.write('<h1>' + data.title + '</h1><ul>' + list.join('') + '</ul>');
在入口文件引入组装成dom。
运行
npm run dev
效果如下：
这样就实现了将txt文件的内容转换成数组引入到组件中使用。
再运行
npm run build
发现命令行报错
ERROR in bundle.js from UglifyJs
Unexpected token: name (list) [bundle.js:74,4]
那是因为main.js中包含了es6语法，需要在 webpack中配置相关loader. 虽然如此，在高版本chrome浏览器运行不会出现错误，因为chrome本身支持es6部分语法。我们还是修改一下webpack配置吧
let path = require('path')
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
rules:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
},
{
test: /\.(txt)$/,
use: [{
loader: path.resolve('./loader'),
options: {
title: '花名册'
}
}]
}
]
}
};
demo02-Loader的内联方式
工具的不断完善过程就是提出问题和解决问题的过程。我给自己提出一个问题。现在我用|和,作为分隔符，如果我有另一个test2.txt文件，是这样的
王五*21*男,赵六*28*女
它的分隔符变成了,和*, 但我需要在同一个Loader实现，应该怎么做呢？很容易想到，应该要在loader使用时传参。
我们先试试原先的title传参行不行。
例如：
import {data} from './loader.js?title=测试标题!./test.txt'
发现结果很怪异。如果loader里面有打印信息，你会发现loader调用了两次。
{ title: '花名册' }
{ title: '标题' }
Hash: 6747a1f812418d4f8c20
Version: webpack 3.10.0
原因是在webpack.config.js中使用了loader。import 引入时，是从右往左处理的，引入text.txt文件时，webpack会自动调用在webpack.config.js中的loader，然后处理到 ./loader.js文件时，又调用了一次。因此webpack.config.js里面应该删掉自定义loader的使用。
let path = require('path')
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
},
module: {
rules:[
{
test: /\.js[x]?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
}
// ,
// {
// test: /\.(txt)$/,
// use: [{
// loader: path.resolve('./loader'),
// options: {
// title: '花名册'
// }
// }]
// }
]
}
};
既然成功了。我们可以将loader改造一下：
let utils = require('loader-utils')
module.exports = function loader(source, map) {
const options = utils.getOptions(this)
let split1 = '|', split2 = ',';
if(options.type === '2') {
split1 = ','
split2 = '*'
}
const strList = source.split(split1)
const list = strList.map(r => {
const data = r.split(split2)
return {
name: data[0],
age: data[1],
sex: data[2]
}
})
return `export const data = {title: '${options.title}', list: ${JSON.stringify(list)}}`
}
代码很简单，如果传入的type是2时，就使用另一套分隔符。
main.js中则这样写：
import {data} from './loader.js?title=合并列表&type=1!./test.txt'
import {data as data2} from './loader.js?type=2!./test2.txt'
let list = data.list.map(r => {
return '<li>' + r.name + '/' + r.age + '/' + r.sex + '</li>'
})
let list2 = data2.list.map(r => {
return '<li>' + r.name + '/' + r.age + '/' + r.sex + '</li>'
})
document.write('<h1>' + data.title + '</h1><ul>' + list.join('') + list2.join('') + '</ul>');
效果OK
项目相关地址：git地址
如果后面有新的想法或许会在这个项目更新
