@angular/cli 工程项目配置

如果你创建工程项目用angular-cli 你的样式文件想使用scss, 并且让ng serve自动编译它们

你可以在创建项目的时候用 ng new sassy-project --style=sass

或者通过ng set defaults.styleExt scss 来修改你现有的项目

然后修改.angular-cli.json的

"styles": [
"styles.css" // "styles.scss"
]

和component里面使用到的scss

创建带路由的项目

ng generate module app-routing --flat --module=app

--flat 把这个文件放进了 src/app 中，而不是单独的目录中。
--module=app 告诉 CLI 把它注册到 AppModule 的 imports 数组中

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

原文地址：https://www.cnblogs.com/zhenguo-chen/p/10442981.html

时间： 2024-11-03 12:30:52

@angular/cli 工程项目配置

Angular6+ webpack自定义扩展

背景

如何使用