angular中自定义webpack配置

用到 @angular-builders/custom-webpack 依赖

安装 custom-webpack

angular - 8.2.14
@angular-builders/custom-webpack - 8.4.1

npm i -D @angular-builders/custom-webpack@8.4.1 或者 yarn add @angular-builders/custom-webpack@8.4.1 --dev

调整angular.json

{// ...省略配置"projects": {"project-name": {// ...省略配置"architect": {"build": {"builder": "@angular-builders/custom-webpack:browser","options": {// ...省略配置"customWebpackConfig": {"path": "./webpack.config.js"}},// ...省略配置},"serve": {"builder": "@angular-builders/custom-webpack:dev-server",// ...省略配置},// ...省略配置}}},// ...省略配置
}

webpack.config.js

module.exports = config => {console.log('config === ', config);config.devServer = Object.assign(config.devServer, {port: 9000,before: (app, server, compiler) => {app.get('/list', (req, res)=>{res.json({ success: true, code: 200, data: [] });})},})return config;
}

测试

npm start 运行看端口和mock的数据已经成功运行了

angular中自定义webpack配置相关推荐

在 angular6 中自定义 webpack 配置
在 angular6 中自定义 webpack 配置我们已经使用 angular6 开发了一套后台管理系统,且体量日益增大,为了优化打包速度,想从 webpack 着手. 但是Angular Cli ...
vue-cli中的webpack配置
编辑模式下显示正常,打开的时候不知道为啥排版有问题. segementfalut链接在这里版本号 vue-cli 2.8.1 (终端通过vue -V 可查看) vue 2.2.2 webpack 2 ...
Angular中的路由配置、路由重定向、默认选中路由
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
SpringBoot中自定义日志配置logback-spring.xml
场景通过系统属性和传统的SpringBoot外部配置文件依然可以很好的支持日志控制和管理. 不同的日志系统对应的命名规范 Logback:logback-spring.xml logbak-spr ...
angular中自定义组件实现双向绑定
使用get,set关键字 get返回父组件变化后的值 set为组件值产生变化后父组件改变 import {Input, Output } from '@angular/core'; ........ ...
Angular中路由的嵌套-父子路由
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
Angular中使用JS实现路由跳转、动态路由传值、get方式传值
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
Angular中实现动态路由跳转并传递参数
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
Angular中实现路由跳转并通过get方式传递参数
场景 Angular介绍.安装Angular Cli.创建Angular项目入门教程: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detail ...
ucharts提示窗tooltips自定义format配置，换行展示标题
ucharts提示窗tooltips默认显示格式,显示横轴数据+类别+纵轴数据,如下图所示现在我们希望横轴类别显示为在第一行显示为标题: 修改ucharts中的config-ucharts.js和u ...

angular中自定义webpack配置

安装 custom-webpack

调整angular.json

webpack.config.js

测试

angular中自定义webpack配置相关推荐

最新文章

热门文章