Webpack 中如何实现一个自己的 loader 🎄

大家好,我是哈默。今天我们来自己实现一个简单的 webpack loader。

什么时候需要使用 loader

当我们需要将除了 js 以外的资源转化为 js 的时候,我们就需要使用 loader。

引入 css

当我们在入口文件 index.js 中,编写了如下代码时:

js 复制代码
// index.js
console.log("hello 哈默");

npm run build 打包,打包成功:

但是当我们引入 非 js 文件的时候,比如我们引入一个 index.css:

js 复制代码
// index.js
import "./index.css";

console.log("hello 哈默");

此时,npm run build,打包就会报错:

因为 webpack 默认无法处理 非 js 文件,它提示我们需要使用合适的 loader 来处理 css 文件。

此时,我们可以配置 css-loader 和 style-loader 来解析 css 文件。

js 复制代码
// webpack.config.js
module.exports = {
  ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      }
    ],
  },
};

此时,打包成功。

自己实现一个 loader

那么现在我们就可以自己来定义一个 loader,来处理我们自己的文件类型,比如我们有一个 .hamovue 类型的文件。

js 复制代码
// test.hamovue
<script>
export default {
  a: 10,
  b: 20
}
</script>

我们模拟 vue 文件的写法,在里面导出了一个对象。

然后在 index.js 中将 test.hamovue 引入:

js 复制代码
import value from "./test.hamovue";

console.log(value);

这个时候,我们打包明显会失败:

我们需要自定义一个 loader 来处理 .hamovue 结尾的文件:

js 复制代码
const REG = /<script>([\s\S+]+?)<\/script>/;

module.exports = function (source) {
  const __source = source.match(REG);
  return __source && __source[1] ? __source[1] : source;
};

这里我们的入参 source 的值为:

js 复制代码
<script>
export default {
  a: 10,
  b: 20
}
</script>

最后整个匿名函数的返回值为:

js 复制代码
export default {
  a: 10,
  b: 20,
};

也就是说,我们将 <script></script> 标签之间的内容,给解析了出来。

最后一步,就是在 webpack.config.js 中,配置在碰到 .hamovue 结尾的文件时,使用我们的这个自定义 loader:

js 复制代码
module: {
  rules: [
    ...,
    {
      test: /\.hamovue$/,
      use: [path.resolve(__dirname, './loader/hamo-loader.js')],
    },
  ],
}

这样一来,当我们引用 test.hamovue 的时候,就能够得到导出的对象。

js 复制代码
import value from "./test.hamovue";

console.log(value); // { a: 10, b: 20 }

总结

在 webpack 中,loader 其实就是一个函数,我们在函数中处理某种类型文件中的代码内容,然后返回处理之后的结果,并且在 webpack 配置文件中使用该 loader 处理这种类型的文件即可。

相关推荐
绝无仅有5 分钟前
数据库MySQL 面试之死锁与排查经验总结
后端·面试·github
小桥风满袖18 分钟前
极简三分钟ES6 - ES9中for await of
前端·javascript
半花35 分钟前
i18n国际语言化配置
前端
编程贝多芬38 分钟前
Promise 的场景和最佳实践
前端·javascript
Asort39 分钟前
JavaScript 从零开始(四):基础语法详解——从变量声明到数据类型的完全指南
前端·javascript
木木jio42 分钟前
前端大文件分片上传 —— 基于 React 的工程化实现
前端·javascript
南雨北斗1 小时前
JS的对象属性存储器
前端
Lotzinfly1 小时前
12个TypeScript奇淫技巧你需要掌握😏😏😏
前端·javascript·面试
一个大苹果1 小时前
setTimeout延迟超过2^31立即执行?揭秘JavaScript定时器的隐藏边界
javascript
开源之眼1 小时前
React中,useState和useReducer有什么区别
前端