实践-写一个简单的 webpack-loader

418 阅读1分钟

Webpack 默认只能处理 JS 文件,要处理其他类型的文件就要依赖 loader 了,比如 css-loader

 module: {
    rules: [
      {
        test: /\.css$/, // 匹配 *.css 文件
        use: ['style-loader', 'css-loader'], // 处理 *.css 文件的 loader
      },
    ],
  },

实现一个 textLoader

这里实现了一个简单的读取 .txt 文本文件的 textLoader,可以实现如下的功能: main.js

import article from './article.txt'; // 引入文本文件

console.log(article); // 打印字符串内容

article.txt (里面就是纯文本)

Every single time you access a website, you leave tracks. Tracks that others can access. If you don't like the idea, find out what software can help you cover them.

经过我们的 textLoader 处理,JS代码就能直接引入 .txt 文件,并将内容读取为字符串了。nice~👍

那么是怎么做到的呢?其实只有一行代码:

module.exports = function loader(source) {
  // loader的唯一参数,即包含源文件文本内容的字符串
  return `export default ${JSON.stringify(source)}`;
};

webpack loader 只接收一个参数,它就是包含源文件文本内容的字符串,这里只是用 export default 包装了下就可以了😺,然后返回处理后的文本字符串。

在 webpack.config.js 中引入这个 loader:

  module: {
    rules: [
      {
        test: /\.txt$/, // 匹配 *.txt 文件
        use: ['./loaders/textLoader.js'], // 处理 *.txt 文件的 loader
      },
    ],
  },

参考 Writing a Loader