乐趣区

Angular6+ webpack自定义扩展

Angular6+ webpack 自定义扩展
背景
在项目开发过程中,发现生产模式下 console.log() 日志文件依然存在,通过百度得出的结果是在生产模式下 console.xx 一系列方法全部重写
window.console.log = ()=>{}
这种方法表示一看就不舒服,无法接受。所以想着想着 @angular/cli 底层是 webpack, 而且代码压缩用的是 UglifyJs,所以想着能不能扩展一配置项,让我把 console 全部给我过滤掉,最后去 Issues 上找了许久,发现 angular6+ 不支持 eject,最后有人推荐了一个工具库 ngx-build-plus,不需要改很多东西就能在现有项目进行集成。接下来教大家如何使用,具体详情可以去 github 上找文档。
如何使用
1. 运行 ng add ngx-build-plus,在 angular7 版本会自动一键配置好,但是 6 版本中可能会出现安装不成功,这时候请直接 npm install ngx-build-plus –save-dev,然后 angular.json 文件中更改以下两处地方:
“build”: {
– “builder”: “@angular-devkit/build-angular:browser”
+ “builder”: “ngx-build-plus:build”

},
“serve”: {
– “builder”: “@angular-devkit/build-angular:dev-server”
+ “builder”: “ngx-build-plus:dev-server”

}
2. 接下来根目录下新建 webpack.extra.js 文件
const UglifyJsPlugin = require(‘uglifyjs-webpack-plugin’);
module.exports = {
optimization: {
minimizer: [new UglifyJsPlugin({
uglifyOptions: {
compress: {
drop_console: true
}
}
})]
}
};
记得 “`npm install uglifyjs-webpack-plugin –save-dev“`

3. 进行生产环境编译
ng build –extraWebpackConfig webpack.extra.js –prod
4. 好了就这么简单。写的比较简陋,有问题可以留言,实在没弄懂我就弄个示例出来。

退出移动版