Webpack Copy Plugin报错：output.filename必填，如何解决？

这个错误提示已经说得很直白了——Webpack必须明确你的输出文件名，哪怕你主要用copy-webpack-plugin来复制静态文件，output.filename都是Webpack的必填基础配置项。

问题根源 #

Webpack本质是模块打包工具，哪怕你没手动指定entry入口（默认会自动查找src/index.js），它也需要知道编译后文件的输出路径和命名规则，缺失output相关配置就会触发这个报错。

具体修复方案 #

修改你的webpack.config.js，添加output配置块，指定filename和path：

var CopyWebpackPlugin = require('copy-webpack-plugin');
var path = require('path');
module.exports = {
  // 新增output配置
  output: {
    filename: 'main.js', // 可自定义文件名，比如用[name].js适配多入口场景
    path: path.resolve(__dirname, 'dist') // 输出目录，和copy插件的to路径保持一致即可
  },
  plugins: [
    new CopyWebpackPlugin([
      { from: 'src', to: 'dist' }
    ])
  ]
};

补充说明 #

• 如果你的项目是纯静态文件复制场景（没有入口JS文件），也可以显式设置entry为一个空对象或者占位文件，但更推荐保留基础的output配置，这是Webpack的标准用法。
• 执行npm run webpack前，确保src目录存在，避免copy插件触发额外的文件不存在报错。

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