执行npm run build时Webpack CopyPlugin配置报错求助

我跟着课程用Webpack和Phaser开发TS/JS游戏，GameScene代码如下：

import { Map } from "../components/map";

import TilesGroup from "../components/tiles/tilesGroup";
import Player from "../components/player/player";

export default class MainScene extends Phaser.Scene{
  player: Player
  tileGroup: TilesGroup
  cursors: Phaser.Input.Keyboard.CursorKeys
  level: number
  constructor(){
    super({
      key: "MainScene"
    })
    
  }
  init(props: {level? : number}){
    const {level = 0} = props
    this.level= Map.calcCurrentLevel(level)

  }

  create(){
    const map= new Map(this.level)
    this.cameras.main.setBackgroundColor('#ade6ff')
    this.cameras.main.fadeIn()

    this.cameras.main.setBounds(map.size.x, map.size.y, map.size.width, map.size.height)
    this.physics.world.setBounds(map.size.x, map.size.y, map.size.width, map.size.height)
    this.input.addPointer(1)
    this.cursors = this.input.keyboard.createCursorKeys()


    this.tileGroup= new TilesGroup(this,map.info.filter((el: TilesConfig) => el.type==="tile"))
    this.player= new Player(this,map.info.filter((el: TilesConfig) => el.type==="player")[0], map.size, this.level) 
  
    this.cameras.main.startFollow(this.player)
    this.physics.add.collider (this.tileGroup, this.player)
  }

update(time: number, delta: number): void{
  this.player.update(this.cursors)
}

}

执行npm run build时出现以下Webpack错误：

[webpack-cli] Failed to load 'C:\Users\vivek\Learning\demo\platformer+game\platformer game\webpack\webpack.dev.js' config
[webpack-cli] Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.  
 - options[0] has an unknown property 'to'. These properties are valid:
   object { patterns, options? }
 - options[1] has an unknown property 'to'. These properties are valid:
   object { patterns, options? }
 - options[2] has an unknown property 'to'. These properties are valid:
   object { patterns, options? }

修改后再次执行npm run build仍报错：

PS C:\Users\vivek\Learning\demo\platformer+game\platformer game> npm run build

> phaser3-typescript-platformer-example@3.16.2 build
> webpack --config webpack/webpack.prod.js

  [webpack-cli] Failed to load 'C:\Users\vivek\Learning\demo\platformer+game\platformer game\webpack\webpack.prod.js' config
  [webpack-cli] Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema.
 - options[0] has an unknown property 'to'. These properties are valid:
    object { patterns, options? }
    -options[1] has an unknown property 'to'. These properties are valid:
     object { patterns, options? }
    - options[2] has an unknown property 'to'. These properties are valid:
      object { patterns, options? }

我的Webpack插件相关代码如下：

plugins: [
new HtmlWebpackPlugin({ template: 'src/index.html' }),
new CopyWebpackPlugin([
  { from: 'src/assets', to: 'assets' },
  { from: 'src/pwa', to: '' },
  { from: 'src/favicon.ico', to: '' }
]),
new InjectManifest({
  swSrc: path.resolve(__dirname, '../src/pwa/sw.js'),
  exclude: [/\/spine\/raw\/*/]
})
]

修复方法 #

错误原因是CopyWebpackPlugin v6+版本修改了API格式，不再直接接受数组作为参数，需要把复制规则放在patterns数组里。

修改后的Webpack插件配置如下：

plugins: [
  new HtmlWebpackPlugin({ template: 'src/index.html' }),
  new CopyWebpackPlugin({
    patterns: [
      { from: 'src/assets', to: 'assets' },
      { from: 'src/pwa', to: '' },
      { from: 'src/favicon.ico', to: '' }
    ]
  }),
  new InjectManifest({
    swSrc: path.resolve(__dirname, '../src/pwa/sw.js'),
    exclude: [/\/spine\/raw\/*/]
  })
]

只需要把原来传给CopyWebpackPlugin的数组，改成包含patterns属性的对象即可，每个复制规则的from和to写法保持不变。修改后重新执行npm run build或npm start即可正常构建运行。

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