首页 >> js开发 >> js如何编写一个 Webpack Loader的实现js大全
js如何编写一个 Webpack Loader的实现js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
前言
前言前言在平时自己由零搭建项目时，虽然基础配置都比较熟悉，比如配置 file-loader, url-loader, css-loader 等，配置不难，但究竟是怎么起作用的呢，今天就来说说如何编写一个 Webpack Loader。Loader 作用
Loader 作用Loader 作用按我自己的简单理解，loader 通常指打包的方案，即按什么方式来处理打包，打包的时候它可以拿到模块源代码，经过特定 loader 的转换后返回新的结果。比如 sass-loader 可以把 SCSS 代码转换成 CSS 代码编写 Loader
编写 Loader
编写 Loader保持功能单一
保持功能单一我们项目中可能会配置很多，但要记住，要保持一个 Loader 的功能单一，避免做多种功能，只需完成一种功能转换即可。所以如 less 文件转换成 css 文件，也不是一步到位，而是 less-loader, css-loader, style-loader 几个 loader 的链式调用才能完成转换。模块
模块因为 Webpack 本身是运行在 Node.js 之上的，一个 loader 其实就是一个 node 模块，这个模块导出的是一个函数，即：
module.exports = function (source) {
// source 为 compiler 传递给 Loader 的一个文件的原内容
// 处理...
return source // 需要返回处理后的内容
}
module.exports = function (source) {
// source 为 compiler 传递给 Loader 的一个文件的原内容
// 处理...
return source // 需要返回处理后的内容
}
这个导出的函数的工作就是获得处理前的原内容，对原内容执行处理后，返回处理后的内容。替换字符串的 loader
替换字符串的 loader比如我们打包时，想要替换源文件的字符串，这时可以考虑使用 Loader，因为 loader 就是获得源文件内容然后对其进行处理，再返回。比如 src 目录下有三个文件：src/msg1.js
export const msg1 = '学习框架'
export const msg1 = '学习框架'src/msg2.js
export const msg2 = '深入理解JS'
export const msg2 = '深入理解JS'
src/index.js
import { msg1 } from './msg1'
import { msg2 } from './msg2'
function print() {
console.log(`输出：${msg1}, ${msg2}`)
}
print()
import { msg1 } from './msg1'
import { msg2 } from './msg2'
function print() {
console.log(`输出：${msg1}, ${msg2}`)
}
print()
做的事情则是把 msg1 和 msg2 两个文件导入，然后输出两个字符串。我们要做的事也很简单，把"框架"转为"React 框架"， "JS"转为"JavaScript"。新建 src/loaders/replaceLoader.js文件，
module.exports = function (source) {
const handleContent = source.replace('框架', 'React框架').replace('JS', 'JavaScript')
return handleContent
}
module.exports = function (source) {
const handleContent = source.replace('框架', 'React框架').replace('JS', 'JavaScript')
return handleContent
}
就这样，loader 写完了！！！上面我们讲到，source 是源文件内容，如果打印的话，则是：使用 Loader
使用 Loader接下来，我们要来使用它，在根目录下新建文件 webpack.config.js
const path = require('path')
module.exports = {
mode: 'production',
entry: './src/index.js',
module: {
rules: [
{
test: /\.js$/,
use: './src/loaders/replaceLoader.js',
},
],
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
},
}
const path = require('path')
module.exports = {
mode: 'production',
entry: './src/index.js',
module: {
rules: [
{
test: /\.js$/,
use: './src/loaders/replaceLoader.js',
},
],
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
},
}
执行npx webpack, 查看打包结果dist/main.js
(()=>{"use strict";console.log("输出：学习React框架, 深入理解JavaScript")})();
(()=>{"use strict";console.log("输出：学习React框架, 深入理解JavaScript")})();
替换成功！需要注意的是，use里面填写的 loader 是去node_modules目录里面找的，由于我们是自定义的 loader，所以不能直接写use: 'replaceLoader'，但直接写路径的方式未免难看点，我们可以通过 webpack 来配置：
module.exports = {
resolveLoader: {
modules: ['node_modules', './src/loaders'], // node_modules找不到，就去./src/loaders找
},
module: {
rules: [
{
test: /\.js$/,
use: 'replaceLoader',
},
],
},
}
module.exports = {
resolveLoader: {
modules: ['node_modules', './src/loaders'], // node_modules找不到，就去./src/loaders找
},
module: {
rules: [
{
test: /\.js$/,
use: 'replaceLoader',
},
],
},
}
获取 loader 的 options
获取 loader 的 options写完之后，让我们来想想，其实就是写一个功能函数嘛。当然，这只是最简单的例子，如果 loader 可以传入参数呢，比如：
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'replaceLoader',
options: {
params: 'replaceString',
},
},
},
],
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'replaceLoader',
options: {
params: 'replaceString',
},
},
},
],
},
这个时候可以使用this.query来获取，通过this.query.params就能拿到，这里需要注意的是，this 上下文是有用的，所以这个 loader 导出函数不能是箭头函数。但 webpack 更推荐loader-utils模块来获取，它提供了许多有用的工具，最常用的一种工具是获取传递给 loader 的选项。首先要安装
npm i -D loader-utils
npm i -D loader-utils
修改src/loaders/replaceLoader.js
const { getOptions } = require('loader-utils')
module.exports = function (source) {
console.log(getOptions(this)) // { params: 'replaceString' }
console.log(this.query.params) // replaceString
const handleContent = source.replace('框架', 'React框架').replace('JS', 'JavaScript')
return handleContent
}
const { getOptions } = require('loader-utils')
module.exports = function (source) {
console.log(getOptions(this)) // { params: 'replaceString' }
console.log(this.query.params) // replaceString
const handleContent = source.replace('框架', 'React框架').replace('JS', 'JavaScript')
return handleContent
}
这里需要注意的是，getOptions(this)参数传入的是 this，也就是说打印结果：
{ params: 'replaceString' }
{ params: 'replaceString' }
{ params: 'replaceString' }
{ params: 'replaceString' }
{ params: 'replaceString' }
{ params: 'replaceString' }this.callback()
this.callback()上面都是返回原来内容转换后的内容，但有些场景下还需要返回其他东西比如 sourceMap
module.exports = function (source) {
// 告诉 Webpack 返回的结果
this.callback(null, source, sourceMaps)
}
module.exports = function (source) {
// 告诉 Webpack 返回的结果
this.callback(null, source, sourceMaps)
}
另外也不需要 return 了，所以也可使用此 API 替代 return
const { getOptions } = require('loader-utils')
module.exports = function (source) {
const handleContent = source.replace('框架', 'React框架').replace('JS', 'JavaScript')
this.callback(null, handleContent)
}
const { getOptions } = require('loader-utils')
module.exports = function (source) {
const handleContent = source.replace('框架', 'React框架').replace('JS', 'JavaScript')
this.callback(null, handleContent)
}
自定义 loader 应用场景
自定义 loader 应用场景在所有 function 外面加一层 try catch 代码块捕获错误，避免手动繁琐添加。
实现中英文替换：可以将文字用占位符如{{ title }}包裹，检测到占位符则根据环境变量替换为中英文。
前言前言在平时自己由零搭建项目时，虽然基础配置都比较熟悉，比如配置 file-loader, url-loader, css-loader 等，配置不难，但究竟是怎么起作用的呢，今天就来说说如何编写一个 Webpack Loader。Loader 作用
Loader 作用Loader 作用按我自己的简单理解，loader 通常指打包的方案，即按什么方式来处理打包，打包的时候它可以拿到模块源代码，经过特定 loader 的转换后返回新的结果。比如 sass-loader 可以把 SCSS 代码转换成 CSS 代码编写 Loader
编写 Loader
编写 Loader保持功能单一
保持功能单一我们项目中可能会配置很多，但要记住，要保持一个 Loader 的功能单一，避免做多种功能，只需完成一种功能转换即可。所以如 less 文件转换成 css 文件，也不是一步到位，而是 less-loader, css-loader, style-loader 几个 loader 的链式调用才能完成转换。模块
模块因为 Webpack 本身是运行在 Node.js 之上的，一个 loader 其实就是一个 node 模块，这个模块导出的是一个函数，即：
module.exports = function (source) {
// source 为 compiler 传递给 Loader 的一个文件的原内容
// 处理...
return source // 需要返回处理后的内容
}
module.exports = function (source) {
// source 为 compiler 传递给 Loader 的一个文件的原内容
// 处理...
return source // 需要返回处理后的内容
}
这个导出的函数的工作就是获得处理前的原内容，对原内容执行处理后，返回处理后的内容。替换字符串的 loader
替换字符串的 loader比如我们打包时，想要替换源文件的字符串，这时可以考虑使用 Loader，因为 loader 就是获得源文件内容然后对其进行处理，再返回。比如 src 目录下有三个文件：src/msg1.js
export const msg1 = '学习框架'
export const msg1 = '学习框架'src/msg2.js
export const msg2 = '深入理解JS'
export const msg2 = '深入理解JS'
src/index.js
import { msg1 } from './msg1'
import { msg2 } from './msg2'
function print() {
console.log(`输出：${msg1}, ${msg2}`)
}
print()
import { msg1 } from './msg1'
import { msg2 } from './msg2'
function print() {
console.log(`输出：${msg1}, ${msg2}`)
}
print()
做的事情则是把 msg1 和 msg2 两个文件导入，然后输出两个字符串。我们要做的事也很简单，把"框架"转为"React 框架"， "JS"转为"JavaScript"。新建 src/loaders/replaceLoader.js文件，
module.exports = function (source) {
const handleContent = source.replace('框架', 'React框架').replace('JS', 'JavaScript')
return handleContent
}
module.exports = function (source) {
const handleContent = source.replace('框架', 'React框架').replace('JS', 'JavaScript')
return handleContent
}
就这样，loader 写完了！！！上面我们讲到，source 是源文件内容，如果打印的话，则是：使用 Loader
使用 Loader接下来，我们要来使用它，在根目录下新建文件 webpack.config.js
const path = require('path')
module.exports = {
mode: 'production',
entry: './src/index.js',
module: {
rules: [
{
test: /\.js$/,
use: './src/loaders/replaceLoader.js',
},
],
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
},
}
const path = require('path')
module.exports = {
mode: 'production',
entry: './src/index.js',
module: {
rules: [
{
test: /\.js$/,
use: './src/loaders/replaceLoader.js',
},
],
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js',
},
}
执行npx webpack, 查看打包结果dist/main.js
(()=>{"use strict";console.log("输出：学习React框架, 深入理解JavaScript")})();
(()=>{"use strict";console.log("输出：学习React框架, 深入理解JavaScript")})();
替换成功！需要注意的是，use里面填写的 loader 是去node_modules目录里面找的，由于我们是自定义的 loader，所以不能直接写use: 'replaceLoader'，但直接写路径的方式未免难看点，我们可以通过 webpack 来配置：
module.exports = {
resolveLoader: {
modules: ['node_modules', './src/loaders'], // node_modules找不到，就去./src/loaders找
},
module: {
rules: [
{
test: /\.js$/,
use: 'replaceLoader',
},
],
},
}
module.exports = {
resolveLoader: {
modules: ['node_modules', './src/loaders'], // node_modules找不到，就去./src/loaders找
},
module: {
rules: [
{
test: /\.js$/,
use: 'replaceLoader',
},
],
},
}
获取 loader 的 options
获取 loader 的 options写完之后，让我们来想想，其实就是写一个功能函数嘛。当然，这只是最简单的例子，如果 loader 可以传入参数呢，比如：
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'replaceLoader',
options: {
params: 'replaceString',
},
},
},
],
},
module: {
rules: [
{
test: /\.js$/,
use: {
loader: 'replaceLoader',
options: {
params: 'replaceString',
},
},
},
],
},
这个时候可以使用this.query来获取，通过this.query.params就能拿到，这里需要注意的是，this 上下文是有用的，所以这个 loader 导出函数不能是箭头函数。但 webpack 更推荐loader-utils模块来获取，它提供了许多有用的工具，最常用的一种工具是获取传递给 loader 的选项。首先要安装
npm i -D loader-utils
npm i -D loader-utils
修改src/loaders/replaceLoader.js
const { getOptions } = require('loader-utils')
module.exports = function (source) {
console.log(getOptions(this)) // { params: 'replaceString' }
console.log(this.query.params) // replaceString
const handleContent = source.replace('框架', 'React框架').replace('JS', 'JavaScript')
return handleContent
}
const { getOptions } = require('loader-utils')
module.exports = function (source) {
console.log(getOptions(this)) // { params: 'replaceString' }
console.log(this.query.params) // replaceString
const handleContent = source.replace('框架', 'React框架').replace('JS', 'JavaScript')
return handleContent
}
这里需要注意的是，getOptions(this)参数传入的是 this，也就是说打印结果：
{ params: 'replaceString' }
{ params: 'replaceString' }
{ params: 'replaceString' }
{ params: 'replaceString' }
{ params: 'replaceString' }
{ params: 'replaceString' }this.callback()
this.callback()上面都是返回原来内容转换后的内容，但有些场景下还需要返回其他东西比如 sourceMap
module.exports = function (source) {
// 告诉 Webpack 返回的结果
this.callback(null, source, sourceMaps)
}
module.exports = function (source) {
// 告诉 Webpack 返回的结果
this.callback(null, source, sourceMaps)
}
另外也不需要 return 了，所以也可使用此 API 替代 return
const { getOptions } = require('loader-utils')
module.exports = function (source) {
const handleContent = source.replace('框架', 'React框架').replace('JS', 'JavaScript')
this.callback(null, handleContent)
}
const { getOptions } = require('loader-utils')
module.exports = function (source) {
const handleContent = source.replace('框架', 'React框架').replace('JS', 'JavaScript')
this.callback(null, handleContent)
}
自定义 loader 应用场景
自定义 loader 应用场景在所有 function 外面加一层 try catch 代码块捕获错误，避免手动繁琐添加。
实现中英文替换：可以将文字用占位符如{{ title }}包裹，检测到占位符则根据环境变量替换为中英文。
刚刚发布热门点击发布时间
- [02/23]chrome 浏览器插件外包:定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]专业电脑浏览器插件外包服务，助力企业数字化转型！
- [02/23]解放双手，效率翻倍！Chrome插件前端自动化外包服务，助您轻松实现业务流程自动化！
- [02/23]定制您的专属Chrome插件！专业外包团队助您轻松实现创意！
- [02/23]Chrome插件外包：为你的浏览器赋能，开启无限可能
- [09/06]node js 调用kimi 接口批量生成网页
- [07/21]Node.js数据采集外包服务-数据采集专家-用Node.js释放数据的力量
- [07/21]专业前端开发-从PSD到响应式网页的无缝转换
- [07/18]专业Chrome插件开发- 为您的业务插上翅膀
- [07/18]智能数据抓取 -浏览器插件接口抓取服务外包
- [07/17]vue3 setup 监听url变化
- [07/17]git 回滚到指定 commit
- [07/15]浏览器插件使用场景:浏览器插件在数据抓取方面的使用场景非常广泛
- [07/15]Chrome 浏览器插件的使用场景
- [07/15]Chrome 浏览器插件开发的特点
