如何用Webpack仅处理入口JS文件并复制其余资源到输出目录？

要实现只处理counters.js，其余文件直接复制到输出目录的需求，你需要用到copy-webpack-plugin这个Webpack插件，搭配基础的Webpack配置即可，具体操作如下：

1. 安装插件 #

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

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

2. 配置Webpack配置文件（webpack.config.js） #

创建或修改项目根目录下的webpack.config.js，写入以下配置：

const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  // 指定仅处理counters.js作为入口文件
  entry: './counters/counters.js',
  // 输出配置
  output: {
    filename: 'counters.js', // 处理后的JS文件名，可按需修改
    path: path.resolve(__dirname, 'dist'), // 输出目录，这里设为dist，可自定义
    clean: true, // 可选：每次构建前清空输出目录，避免冗余文件
  },
  plugins: [
    new CopyPlugin({
      patterns: [
        {
          from: './counters/', // 源文件目录
          to: './', // 输出到dist目录的根路径
          // 排除已经通过入口处理的counters.js，避免重复复制
          globOptions: {
            ignore: ['**/counters.js'],
          },
        },
      ],
    }),
  ],
};

配置说明 #

• 入口与输出：通过entry指定仅对counters.js进行Webpack的打包、转译等处理，处理后的文件会输出到output.path指定的目录下。
• copy-webpack-plugin：负责将counters目录中除了counters.js之外的所有文件（block.json、counters.css、counters.php）直接复制到输出目录，无需额外处理。
• 如果需要对counters.js做额外处理（比如用Babel转译），可以正常添加module.rules配置，不会影响其他文件的复制逻辑。

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