关于angular7以上 外链webpack配置

最近因为需要进行对angular项目进行优化，提升访问速度。首先就想起了webpack,我们在使用webpack的时候，可以进行代码压缩，图片压缩等，但是angular6以上版本无法找到可以进行webpack配置的地方，所以查了官方文档。

附上官网文档地址
https://www.npmjs.com/package/@angular-builders/custom-webpack

选择你自己版本号 cli的版本

npm i @angular-builders/custom-webpack@7

npm i @angular-builders/dev-server@7

这里的版本号一定要和cli的版本相同，不然就会报错说缺少一个类，
下载完毕后。来到angular.json
“build”: {
“builder”: “@angular-builders/custom-webpack:browser”,
“options”: {
“customWebpackConfig”: {
“path”: “./extra-webpack.config.js”,
“mergeStrategies”: { “externals”: “append” }
},
}
解释一下都是什么意思：
bulider:默认是情况下是cli自己配置，你将builder的配置变成@angular-builders/custom-webpack:browser"后面有一个path，他指向了你自己的webpack配置。这个配置不会覆盖系统的配置，而是添加。

angular-builders/custom-webpack:browser提供了 3种模式
“mergeStrategies”: { “externals”: “append” }

可以读一下文档

你的项目一定会使用ng serve对吧， 那么还需要在serve中在配置一下
“serve”: {
“builder”: “@angular-builders/dev-server:generic”
}
然后angular.json同级的地方，建立一个webpack.config.js的文件，然后你就可以进行配置了 ,配置的方式和以前一样

这是我的配置，我需要压缩js。

如果不喜欢上述的方式还可以使用函数的方式

const webpack = require(“webpack”);
const pkg = require("./package.json");

module.exports = (config, options) => {
config.plugins.push(
new webpack.DefinePlugin({
APP_VERSION: JSON.stringify(pkg.version)
})
);

return config;
};

这里添加新的插件。上一次写的过于潦草。希望可以帮到你