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.好了就这么简朴。写的比较大略,有题目能够留言,着实没弄懂我就弄个示例出来。

    原文作者:迎竹
    原文地址: https://segmentfault.com/a/1190000017780020
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞