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。