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.好了就這麼簡單。寫的比較簡陋，有問題能夠留言，實在沒弄懂我就弄個示例出來。