Angular 6升级后报错:无法找到模块'@angular/cli/plugins/webpack'
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里写插件逻辑:
打开项目根目录下的
angular.json文件找到你的项目节点下的
architect > build > options > assets,确保配置如下:"assets": [ "src/assets", "src/favicon.ico" ]这个配置会自动把
src/assets目录和src/favicon.ico文件复制到打包输出目录,而且默认就会忽略.gitkeep这类文件,和你原来的GlobCopyWebpackPlugin逻辑完全一致。最后删除webpack.config.js里那段关于
GlobCopyWebpackPlugin的导入和插件代码,直接运行npm start就能正常启动了。
方案2:自定义Webpack配置(适用于特殊需求场景)
如果你确实需要自定义资产复制逻辑(比如有特殊的文件过滤、路径映射需求),Angular 6+推荐用@angular-builders/custom-webpack来扩展Webpack配置,步骤如下:
安装依赖:
npm install @angular-builders/custom-webpack copy-webpack-plugin --save-dev修改
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", // 保留原来的其他配置 }
- 找到
重构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

