Angular6+ webpack自定義擴展

xorpay 發布于2019-08-23 14:32 / 685人閱讀

摘要：自定義擴展背景在項目開發過程中，發現生產模式下日志文件依然存在，通過百度得出的結果是在生產模式下一系列方法全部重寫這種方法表示一看就不舒服，無法接受。接下來教大家如何使用，具體詳情可以去上找文檔。

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

GPU云服務器云服務器自定義頭像自定義網站自定義自定義按鈕

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/100753.html

Angular7 中使用 svg sprite

摘要：起因看到項目中很多，使用方法都是使用標簽引入。解決方案在網上了解到可以將眾多文件合并成一個，用的方式區分不同的圖案，然后使用標簽引用。在版本廢棄了命令，不再支持自定義，而中的未提供自定義或是執行外掛腳本的配置。起因看到項目中很多svg，使用方法都是使用img標簽引入。于是就想將svg合并，像字體圖標那樣方便使用。解決方案 ??在網上了解到可以將眾多svg文件合并成一個，用symb...

陳江龍 2019-08-26 13:53 評論0 收藏0
angular6 自定義組件，實現雙向數據綁定

摘要：在編寫組件之前，首先看一下組件的使用方式和效果其中標簽是自定義組件，利用符號進行雙向綁定，下面標簽顯示所綁定的值。在包裝輸入類型的組件時，我們需要向外暴露數據接口，用戶輸入和輸出，這時候在組件內部定義雙向綁定，會大大方便用戶的使用。在編寫組件之前，首先看一下組件的使用方式和效果： app.component：{{testBinding}} 其中binding-test標簽是自定義...

Ajian 2019-08-23 12:17 評論0 收藏0
用WijmoJS玩轉您的Web應用 —— Angular6

摘要：除在全球率先支持外，現已全面應用于等主流框架中。本文中，我們將專注于如何將添加到用編寫的應用程序中。使用創建應用程序。接下來，我們定義適用于這些元素中托管的應用程序面板元素和控件的規則。往期精彩用玩轉您的應用為什么選擇WijmoJS？作為一款純前端控件集，WijmoJS秉承快如閃電，觸控優先的設計理念，在提供優質服務和產品的同時，專注于企業應用開發，不斷優化產品架構，與時俱進。除在...

hedge_hog 2019-08-22 17:59 評論0 收藏0