前言

在平时本人由零搭建我的项目时，尽管根底配置都比拟相熟，比方配置 file-loader, url-loader, css-loader 等，配置不难，但到底是怎么起作用的呢，明天就来说说如何编写一个 Webpack Loader。

Loader 作用

按我本人的简略了解，loader 通常指打包的计划，即按什么形式来解决打包，打包的时候它能够拿到模块源代码，通过特定 loader 的转换后返回新的后果。

比方 sass-loader 能够把 SCSS 代码转换成 CSS 代码

编写 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 // 须要返回解决后的内容}

这个导出的函数的工作就是取得解决前的原内容，对原内容执行解决后，返回解决后的内容。

替换字符串的 loader

比方咱们打包时，想要替换源文件的字符串，这时能够思考应用 Loader，因为 loader 就是取得源文件内容而后对其进行解决，再返回。

比方 src 目录下有三个文件：

src/msg1.js

export const msg1 = '学习框架'

src/msg2.js

export const msg2 = '深刻了解JS'

src/index.js

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}

就这样，loader 写完了！！！

下面咱们讲到，source 是源文件内容，如果打印的话，则是：

应用 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',  },}

执行npx webpack,
查看打包后果dist/main.js

(()=>{"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',      },    ],  },}

获取 loader 的 options

写完之后，让咱们来想想，其实就是写一个性能函数嘛。

当然，这只是最简略的例子，如果 loader 能够传入参数呢，比方：

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

批改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}

这里须要留神的是，getOptions(this)参数传入的是 this，也就是说

打印后果：

{ params: 'replaceString' }{ params: 'replaceString' }{ params: 'replaceString' }

this.callback()

下面都是返回原来内容转换后的内容，但有些场景下还须要返回其余货色比方 sourceMap

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)}

自定义 loader 利用场景

  1. 在所有 function 里面加一层 try catch 代码块捕捉谬误，防止手动繁琐增加。
  2. 实现中英文替换：能够将文字用占位符如{{ title }}包裹，检测到占位符则依据环境变量替换为中英文。


  • ps： 集体技术博文 Github 仓库，感觉不错的话欢送 star，给我一点激励持续写作吧~