如何配置Webpack打包未被导入的config目录静态JSON文件？

要实现将config目录中未被任何模块导入的静态JSON文件打包到build目录（与main.xxx.js同级），最直接的方案是使用copy-webpack-plugin插件，具体步骤如下：

1. 安装插件 #

在项目根目录执行安装命令：

npm install copy-webpack-plugin --save-dev
# 或使用yarn
yarn add copy-webpack-plugin --dev

2. 修改Webpack配置文件 #

在webpack.config.js中引入插件，并添加复制规则：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // 已有的其他配置（entry、output、module等）
  plugins: [
    // 已有的其他插件
    new CopyWebpackPlugin({
      patterns: [
        {
          from: './config/*.json', // 匹配config目录下所有JSON文件，可按需调整路径
          to: './', // 输出到build目录根目录，与main.xxx.js同级
          flatten: true, // 仅复制文件，不保留原config目录结构
          // 可选：排除不需要复制的文件
          globOptions: {
            ignore: ['**/不需要的文件.json'],
          },
        },
      ],
    }),
  ],
};

关键参数说明 #

• from：指定要复制的文件路径，支持glob模式匹配（比如config/**/*.json匹配config下所有子目录的JSON）。
• to：输出路径，设为./表示输出到Webpack配置的output.path目录（即build目录）的根位置。
• flatten: true：确保文件直接输出到目标目录，而不是嵌套在config子目录下。

配置完成后，执行Webpack打包命令，config目录中符合规则的静态JSON文件就会被复制到build目录，与main.xxx.js处于同级位置。

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