如何使用Webpack导入文本文件 实现txt文件同JSON一样通过require引入

实现require引入txt文件的方法 #

Node.js 中 require 方法默认仅支持加载 .js、.json、.node 三种后缀的文件，要实现和引入JSON一样直接引入txt文本，按照你运行的环境选择对应方案即可：

场景1：Node.js 原生环境运行（比如Electron主进程、Node.js服务端等） #

在项目入口文件最顶部添加如下代码，注册txt文件的解析逻辑：

require.extensions['.txt'] = function (module, filename) {
  const fs = require('fs');
  // 直接返回txt文件的utf8格式文本内容
  module.exports = fs.readFileSync(filename, 'utf8');
};

添加完成后你给出的参考代码就可以直接正常运行，数组中每个元素对应对应txt文件的文本内容。

场景2：Webpack/Vite 等打包工具环境运行（浏览器端游戏） #

不需要修改Node.js侧逻辑，直接在打包工具中添加txt文件的解析规则即可：

• Webpack5 配置示例（添加到webpack.config.js的module.rules数组中）：

{
  test: /\.txt$/,
  type: 'asset/source'
}

• Vite 环境默认支持引入txt文本，只需要在引入路径后加?raw后缀即可，如果要兼容require写法可以安装适配的require插件，也可以直接改成ESModule引入写法：

import level1 from './levels/1.txt?raw'
import level2 from './levels/2.txt?raw'
import level3 from './levels/3.txt?raw'
const levels = [level1, level2, level3]

注意：require.extensions 虽然被Node.js官方标记为废弃，但目前所有主流Node.js版本都保留了该能力，原生环境下可以放心使用。

内容的提问来源于stack exchange，提问作者Lucien