webpack loader自定义编写
loader
文档定义
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件!
- 编写
- 本质上一个loader就是一个node模块,也就是一个js文件。
- 这个文件导出一个函数, 导出的这个函数接收一个
source
参数, 用来接受,webpack传过来的文件源码 - 这个函数返回一个新的source 供链式调用。
- 以字符串替换为例, loader代码如下
const loaderUtils = require(‘loader-utils‘) module.exports = function (source) { const options = loaderUtils.getOptions(this) || {} const {key = ‘like‘, value = ‘?‘} = options; const re = new RegExp(key,‘ig‘) const res = source.replace(re,value) return res }
loader-utils
是webpack
内置的模块, 不需要安装, 可以直接使用。- 通过
loader-utils
下的getOptions
方法,获取 webpack配置loader时的参数。
- 自定义loader的使用
- 可以发布npm包(参考npm发布包的相关使用)
- 本地使用
- 本地使用
- 创建loader文件夹 专门存放自定义的loader文件
- 由于webpack默认的loader是从
node_modules
文件夹下查找的。所以需要配置路径, 让webpack能找到你本地的loader: - 有两个方式配置loader路径
module:{ rules:[ { test:/\.js$/, use:[ { loader:path.resolve(‘./loader/k-loader.js‘), options:{ value:‘LIKE‘ } } ] } ] }
通过webpack的 resolveLoader扩展 loader目录。
resolveLoader:{ modules:[ ‘node_modules‘, path.resolve(__dirname, ‘./loader‘) ] }, module:{ rules:[ { test:/\.js$/, use:[ { loader:‘k-loader‘, options:{ value:‘LIKE‘ } } ] } ] }