关于前端:如何编写一个-Webpack-Loader

前言

在平时本人由零搭建我的项目时，尽管根底配置都比拟相熟，比方配置 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，给我一点激励持续写作吧~