vue-cli增加copy-webpack-plugin配置报错

4,013 阅读1分钟

今天遇到一个问题,需要给vue-cli构建的项目添加 copy-webpack-plugin配置遇到了问题,在vue.config.js文件中设置语句如下:

module.exports = {
  ...
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          { from: './src/assets/images' , to: 'images' }
        ],
      })
    ]
  }
};

build编译时报错:

ERROR  TypeError: compilation.getCache is not a function
TypeError: compilation.getCache is not a function

查了一圈发现可以用以下两种方法来解决这个问题

  1. 将copywebpack插件降级到5.1.0并使用旧的语法解决这个问题
configureWebpack: {
    plugins: [
      // 拷贝静态文件到目标文件
      new CopyWebpackPlugin([
        { from: './src/assets/images' , to: 'images' }
      ])
    ]
  }
  1. 升级web包并解决由其引起的其他语法更改

github.com/webpack-con…

  1. 采用vue-cli内置的copy-webpack-plugin 后面找了一圈资料,发vue-cli内置了copy-webpack-plugin,可以使用以下语句:
chainWebpack: config =>{
  config.plugin("copy").use(require('copy-webpack-plugin'), [{
    patterns: [
      {from: `./application/${componentName}/public`}
    ]
  }])
}

会将内容自动拷贝到目标文件夹下。