如何通过Webpack将JSON文件排除在打包产物之外？

看起来你想用Webpack把users.json排除在打包包之外，同时还能在代码里正常访问它，现在用externals的方式没生效对吧？这是因为你对externals的用法理解有点偏差，我来给你两个可行的解决方案：

方案一：用file-loader处理JSON文件（推荐Node.js/浏览器通用） #

externals更多是用来处理第三方npm包这类外部依赖，对于本地JSON文件，用file-loader会更合适——它会把JSON文件原封不动复制到打包输出目录，同时在代码里返回文件的访问路径，这样你就能自己读取文件内容了。

步骤很简单：

1. 先安装file-loader：

npm install file-loader --save-dev

2. 修改你的webpack.config.js，添加针对users.json的处理规则：

module.exports = {
  // 你的其他Webpack配置（entry、output这些）...
  module: {
    rules: [
      {
        // 精准匹配users.json文件
        test: /users\.json$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]', // 保持原文件名输出
              outputPath: './', // 输出到打包后的根目录，你可以根据需求调整路径
            },
          },
        ],
      },
    ],
  },
};

3. 调整index.js里的代码，因为现在require('./users.json')返回的是文件路径，你需要用Node.js的fs模块去读取内容：

const fs = require('fs');
const path = require('path');

// 现在usersPath是打包后JSON文件的相对路径
const usersPath = require('./users.json');
// 拼接成绝对路径确保能正确读取
const fullUsersPath = path.join(__dirname, usersPath);
// 读取并解析JSON
const users = JSON.parse(fs.readFileSync(fullUsersPath, 'utf8'));
console.log(users);

这样打包后，users.json会被复制到你的输出目录，代码运行时会直接读取这个文件，不会把JSON内容打包进bundle里。

方案二：修正externals的配置（仅Node.js环境适用） #

如果你坚持想用externals，得调整配置格式，让Webpack知道这个模块要在运行时由Node.js来加载：

module.exports = {
  // 其他配置...
  externals: {
    './users.json': 'commonjs ./users.json',
  },
};

配置后，Webpack会保留代码里的require('./users.json')语句，不会把JSON内容打包进去。但要注意：打包后的文件和users.json的相对路径必须和开发时一致，比如你开发时index.js和users.json在同一目录，打包后的bundle也得和users.json放在同一目录下，否则Node.js会找不到这个文件。

小提醒 #

• 如果你是在浏览器环境下使用，方案一可以调整成用fetch读取文件（浏览器不支持fs模块）：

fetch(require('./users.json'))
  .then(res => res.json())
  .then(users => console.log(users));

• 不管用哪种方案，打包后记得检查输出目录里的文件结构，确保users.json的位置和代码里的路径匹配。

备注：内容来源于stack exchange，提问作者Ianor Elgar