自己写一个简单的自定义 loader

Webpack custom loader

文章引用请注明出处

本文讲一下怎么制作自己的webpack 自定义loader。

webpack loader的作用是进行模块资源的转换，webpack打包只认识js，这个时候项目里使用到的图片资源、样式资源等就需要用loader来进行转换，转换成js，然后webpack再进行打包。

那loader是怎样进行转换的呢，每种loader就是一个js文件，它接收到webpack传给它的“上下文”， 这个“上下文”就是项目源代码，loader拿到源代码，其实是一系列字符串，就可以进行操作转换了。

下面看一个demo：

比如我们有这样一个需求，就是在我们所有的打包文件中都加上 “ 公司名@年份” 这个注释句子。

首先我们可以在webpack.config.js的同级目录下创建一个目录叫做custom-loaders ，然后在这个目录下创建一个自定义loader文件add-copyright-loader.js

// `add-copyright-loader.js`
module.exports = function (content) {
  return `/** alibaba@2020 */\n${content}`;
};

loader文件是一个node模块， 以commonJs的方式导出一个函数，这个函数接收的参数有三个，content, map, meta，map和meta是可以省略的，其中content能拿到webpack处理源文件时每个文件对应的代码，它是string或者buffer（buffer可以转换成string），我们拿到这个字符串就能对源代码进行修改了，转换成我们需要的样子再返回回去。

在webpack.config.js中把我们的自定义loader加进来：

// ... 
module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        use: [
          {
            loader: path.resolve(
              __dirname,
              "./custom-loaders/add-copyright-loader.js"
            ),
          },
        ],
        exclude: /node_modules/,
      },
    ],
  },

然后执行npm run build，我们就可以在打包文件中看到：

// dist/index.js 这个是webpack config mode 设置为'none'时打包的结果
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _add__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1);
/** alibaba@2020 */

console.log("test");


/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "add", function() { return add; });
/** alibaba@2020 */
const add = (a, b) => a + b;


/***/ })
/******/ ]);

总结：webpack loader 其实就是对资源文件的转换，从上一个laoder拿到结果，转换后再返回给下一个loader，所以在配置文件中要注意loader的顺序。