You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Angular 6升级后报错:无法找到模块'@angular/cli/plugins/webpack'

解决Angular 6升级后 Cannot find module '@angular/cli/plugins/webpack' 的问题

这个问题本质是Angular CLI 6+ 彻底重构了内部Webpack插件的组织方式,原来的@angular/cli/plugins/webpack模块被移除,GlobCopyWebpackPlugin也不再作为公开可用的插件提供了。给你两个解决方案,优先选第一个,更贴合Angular 6+的最佳实践:

方案1:使用Angular CLI内置的资产配置(推荐)

Angular 6开始用angular.json替代了旧版的.angular-cli.json,其中已经内置了资产复制的配置,完全不需要手动在webpack.config.js里写插件逻辑:

  1. 打开项目根目录下的angular.json文件

  2. 找到你的项目节点下的architect > build > options > assets,确保配置如下:

    "assets": [
      "src/assets",
      "src/favicon.ico"
    ]
    

    这个配置会自动把src/assets目录和src/favicon.ico文件复制到打包输出目录,而且默认就会忽略.gitkeep这类文件,和你原来的GlobCopyWebpackPlugin逻辑完全一致。

  3. 最后删除webpack.config.js里那段关于GlobCopyWebpackPlugin的导入和插件代码,直接运行npm start就能正常启动了。

方案2:自定义Webpack配置(适用于特殊需求场景)

如果你确实需要自定义资产复制逻辑(比如有特殊的文件过滤、路径映射需求),Angular 6+推荐用@angular-builders/custom-webpack来扩展Webpack配置,步骤如下:

  1. 安装依赖:

    npm install @angular-builders/custom-webpack copy-webpack-plugin --save-dev
    
  2. 修改angular.json,替换默认的构建器:

    • 找到architect > build,把builder从@angular-devkit/build-angular:browser改成@angular-builders/custom-webpack:browser,并添加customWebpackConfig配置:
      "build": {
        "builder": "@angular-builders/custom-webpack:browser",
        "options": {
          "customWebpackConfig": {
            "path": "./webpack.config.js"
          },
          // 保留你原来的其他配置(outputPath、index、main等)
        }
      }
      
    • 同样修改architect > serve的builder为@angular-builders/custom-webpack:dev-server:
      "serve": {
        "builder": "@angular-builders/custom-webpack:dev-server",
        // 保留原来的其他配置
      }
      
  3. 重构webpack.config.js里的复制逻辑,用copy-webpack-plugin替代原来的GlobCopyWebpackPlugin:

    const CopyWebpackPlugin = require('copy-webpack-plugin');
    
    module.exports = {
      plugins: [
        new CopyWebpackPlugin({
          patterns: [
            { from: 'src/assets', to: 'assets' },
            { from: 'src/favicon.ico', to: 'favicon.ico' }
          ],
          options: {
            globOptions: {
              ignore: ['**/.gitkeep']
            }
          }
        })
      ]
    };
    

这样修改后,运行npm start就能正常启动项目了。


内容的提问来源于stack exchange,提问作者Matthias Sommer

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.27 09:53:17