Angular6+ webpack自定义扩展

xorpay 发布于2019-08-23 14:32 / 564人阅读

摘要：自定义扩展背景在项目开发过程中，发现生产模式下日志文件依然存在，通过百度得出的结果是在生产模式下一系列方法全部重写这种方法表示一看就不舒服，无法接受。接下来教大家如何使用，具体详情可以去上找文档。

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://www.ucloud.cn/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