首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在我的angular 5项目中添加"webpack.config.vendor.js“文件

在Angular 5项目中添加"webpack.config.vendor.js"文件,可以通过以下步骤完成:

  1. 创建"webpack.config.vendor.js"文件:在项目的根目录下创建一个名为"webpack.config.vendor.js"的文件。
  2. 配置"webpack.config.vendor.js"文件:打开"webpack.config.vendor.js"文件,并添加以下内容:
代码语言:txt
复制
const webpack = require('webpack');
const path = require('path');

module.exports = {
  entry: {
    vendor: [
      'rxjs',
      '@angular/core',
      '@angular/common',
      '@angular/forms',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      // 添加其他需要打包的第三方库
    ]
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].bundle.js',
    library: '[name]_[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_[hash]',
      path: path.join(__dirname, 'dist', '[name]-manifest.json')
    })
  ]
};

在entry中,添加需要打包的第三方库,例如rxjs和Angular的核心模块。你可以根据项目的需求添加其他需要打包的第三方库。

  1. 修改"angular.json"文件:打开"angular.json"文件,找到"projects" -> "your-project-name" -> "architect" -> "build" -> "options" -> "vendorChunk",将其设置为false,以禁用默认的vendor chunk。
代码语言:txt
复制
"options": {
  "vendorChunk": false
}
  1. 修改"package.json"文件:在"scripts"部分添加一个自定义的脚本命令,用于在构建项目时执行"webpack.config.vendor.js"文件。
代码语言:txt
复制
"scripts": {
  "build:vendor": "webpack --config webpack.config.vendor.js",
  "build": "ng build && npm run build:vendor"
}
  1. 运行构建命令:在命令行中运行以下命令,构建项目并生成"vendor.bundle.js"文件。
代码语言:txt
复制
npm run build
  1. 使用生成的"vendor.bundle.js"文件:在项目的HTML文件中,通过script标签引入生成的"vendor.bundle.js"文件。
代码语言:txt
复制
<script src="vendor.bundle.js"></script>

这样,你就成功地在Angular 5项目中添加了"webpack.config.vendor.js"文件,并将第三方库打包成了"vendor.bundle.js"文件。这样做的好处是可以减小主要bundle的大小,提高应用的加载速度。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

何在 Windows 上安装 AngularAngular CLI、Node.js 和构建工具指南

什么是 Angular CLI? Angular CLI 是用于初始化和使用 Angular 项目的官方工具。它使您免于复杂配置和构建工具( TypeScript、Webpack 等)麻烦。...: add: 向您项目添加对外部库支持。...run: 运行项目中定义自定义目标。 serve (s): 构建并服务您应用程序,根据文件更改进行重建。 test (t): 在项目中运行单元测试。 update: 更新您应用程序及其依赖项。...当然,您可以为您项目选择任何有效名称。由于我们将创建一个全栈应用程序,因此使用 frontend 作为前端应用程序名称。 如前所述,CLI 会询问您是否要添加 Angular 路由?...Angular CLI 将自动在 src/app.module.ts 文件添加对组件、指令和管道引用。

36000

【ASP.NET Core 基础知识】--前端开发--集成前端框架

通过这些步骤,就成功地创建了一个简单 ASP.NET Core 项目,并且可以在本地运行它。可以根据需要进一步在项目中添加功能和内容。...配置 ASP.NET Core 以提供静态文件: 在 ASP.NET Core 项目的 Startup.cs 文件 Configure 方法中添加以下代码来启用静态文件服务。...配置 ASP.NET Core 以提供静态文件: 在 ASP.NET Core 项目的 Startup.cs 文件 Configure 方法中添加以下代码来启用静态文件服务。...配置 ASP.NET Core 以提供静态文件: 在 ASP.NET Core 项目的 Startup.cs 文件 Configure 方法中添加以下代码来启用静态文件服务。...下面将展示如何在 ASP.NET Core 中创建和使用 RESTful API,并在前端框架中进行调用。

13200
  • Angular实战之使用NG-ZORRO创建一个企业级中后台框架(进阶篇)

    前言:   上一篇文章我们讲了如何在创建Angular目中快速引入ng-zorro-antd企业中台组件库,并且快速构建后台管理页面框架模板。...这一章主要介绍是如何在创建好后台管理页面框架快速生成NG-ZORRO相关组件,并且介绍Angular相关目录结构、生命周期函数,路由配置和使用相关知识点,以及如何使用Angular CLI使用一行代码快速添加...运行应用程序端到端 (E2E) 测试 构建应用程序 使用命令添加功能到现有的 Angular 应用程序: 可以使用 ng generate 命令,为已有的 Angular 应用程序添加功能: ng...接下来将会通过开发一个简单博客系统,主要分博客管理和用户管理两个模块。带领大家一步一步完善自己项目模块页面。...2、配置首页组件路由(多模块路由完美解决): 首先,我们博客项目存在博客管理和用户管理两个核心模块,我们创建了两个模块,那么我们如何在【app-routing.module.ts】应用路由文件中配置多个模块路由

    3.9K20

    前端常见面试题--初级版

    2.如何在 React 中实现组件之间通信?3.Angular 依赖注入是如何工作?4.你如何使用 jQuery 选择和操作 DOM?...### 回答示例:**使用Git:**使用Git进行版本控制,通过git clone克隆仓库,git add添加文件到暂存区,git commit提交更改,git push推送更改到远程仓库等。...添加更改:使用git add命令将文件添加到暂存区。提交:使用git commit命令将暂存区更改提交到本地仓库,并添加提交信息。...同时,也注重与团队成员沟通和协作,共同应对项目中变化。**与团队成员协作:**在过去目中积极与团队成员协作,共同完成任务。注重沟通和分享,经常与团队成员讨论问题并分享经验。...通过团队协作,我们成功地完成了多个复杂前端项目。**解决复杂问题经历:**在一次项目中遇到了一个复杂布局问题。首先分析了问题原因,并尝试了多种解决方案。

    7210

    Angular 中结构指令模式 - 它们是什么且怎么使用

    Angular 中,有两种类型指令。属性指令修改 DOM 元素外观或者行为。结构指令添加或者移除 DOM 元素。 结构指令是 Angular 中最强大特性之一,然而它们却频繁被误解。...如果你对学习 结构指令 感兴趣,那么现在我们就来接着阅读,并了解它们是什么,它们有什么用以及如何在目中使用它们。 你将学到什么 在本文中,你将学到关于 Angular 结构指令模式知识点。...学完本文,你将更好理解这些指令并在实际项目中使用它们。 Angular 结构指令是什么? Angular 结构指令是能够更改 DOM 结构指令。这些指令可以添加、移除或者替换元素。...要使用结构指令,我们需要在 HTML 模版中添加一个带有指令元素。然后根据我们在指令中设置条件或者表达式添加、删除或者替换元素。 结构指令例子 我们添加些简单 HTML 代码。...Angular 中我们什么时候需要用结构指令呢? 如果你想在 DOM 中添加或者移除一个元素时候,你就应该使用结构指令。 当然,我们还可以使用它们来更改元素 CSS 样式,或者添加事件监听器。

    3.8K20

    纯前端控件集 WijmoJS 2018V2发布,在React、Vue和Angular中更易用

    安装后,它会在每个Angular 框架下WijmoJS组件上方添加“Wijmo Designer ...”操作。单击操作按钮后,它将打开一个设计界面,用于自定义该特定组件。...与顶级组件互补子组件,定义FlexGrid列wjc-flex-grid-column组件,作为它们所代表WijmoJS 类包装器。...随着新版本上线,WijmoJS 添加了Web Components In Angular示例,演示了如何在Angular应用程序中使用 WijmoJS Web组件。...其他流行框架(React,Vue,Polymer等)示例正在开发中。 支持SASS类型样式 WijmoJS 控件样式(布局,默认样式)最初是用CSS编写。但如今,已经完成了SASS样式重写。...例如,项目中有一个仅包含核心模块(非企业)WijmoJS-Core文件,它可能仅是全部CSS文件一小部分,您可以选择只加载这部分模块来真正优化CSS大小。

    7K20

    用Angule Cli创建Angular项目

    /cli 2.创建新项目 打开终端窗口(这里使用是webstormTerminal,也可以使用计算机自带powershell) ng new my-app 项目会很快创建完成,接下来你会看到...--global packageManager = cnpm 然后我们项目就创建完成了 我们会发现在文档中有很多文件,这里参考Angular官方文档 ,以便认识这些文件作用。  ...3.在项目中引入bootstrap和jQuery     这里使用webstormTerminal,直接在终端操作 cnpm install bootstrap --save cnpm install...jquery --save 我们在项目中添加了bootstrap和jQuery,我们可以在node_modules文件夹中找到他们(这个文件夹放是第三方库); 然后我们需要操作.angular-cli.json...文件,把bootstrap和jQuery添加进去: 这里需要注意是:因为angular是微软开发typescript语言,我们需要在终端做下面的操作,以便让typescript认识bootstrap

    1.5K60

    有奖征集:云开发CloudBase101种玩法

    在本次征文活动中,开发者可以 Show 出自己用法,向开发者征集 Web 云开发使用教程,通过这些教程,让更多开发者可以享受到云计算带来畅快感!...应用 基于云接入开发 Express 应用 基于云接入开发 Next.js 应用 基于云接入开发 Sails.js 应用 基于云接入开发 Fastify 应用 基于云接入开发 Restify 应用 如何在已有的...Vue 项目中引入云开发 如何在已有的 React 项目中引入云开发 如何在已有的 Angular目中引入云开发 云开发数据库数据如何去重返回 云开发数据库返回值如何按照多个数据排序 云开发数据库如何查询当天数据...云开发数据库如何实现随机返回数据 云开发数据库如何实现队列 云开发数据库如何实现栈 其他和 Web 云开发相关内容 征文形式 文件格式:征文需要以 markdown 格式提交。...,稿件经采用,将会发放 50 元云开发代金券!

    3.4K10

    Angular中sweetalert弹框使用详解

    最近太忙了,项目中使用弹框老板嫌太丑,让我们优化一下,在网上找了一下,找到了sweetalert弹框,算是比较好看弹框了。...所以我就想办法将sweetalert用到项目中,在项目中引入sweetalert时,遇到诸多问题,但最终在不懈坚持下,都解决了,实现了效果。具体用法请看下文。...一定要注意版本,如果angular-sweetalert版本过高,所依赖文件angular版本过低,会导致引入报错。...五、相关问题 1、传函数错误 Swal(“确定提交吗”,  function(){}, ‘error’ );  //这种写法在这个版本中是错误这个版本支持then(), 不支持直接在参数中写方法..., "你虚拟文件已经被删除。", "success"); 12 }); 在这个版本中只能按照最上面所列举去实现,那是在官方英文文档中发现,中文文档太坑了。

    2.8K40

    解锁全栈能力:java程序员全栈自我革新与ChatGPT智能协助

    前端开发 环境搭建:确保你开发环境已经安装Node.js,因为Tailwind CSS需要通过npm安装。 开始使用UIkit:通过其官方网站了解如何在目中引入UIkit。...错误处理:在前端和后端代码中添加适当错误处理逻辑,以优雅地处理失败请求。 状态管理:对于复杂应用,可能需要使用前端状态管理库(Redux或Vuex)来管理应用状态。...Alpine.js提供了类似Vue响应式和声明式绑定功能,但以更轻量级方式实现,非常适合添加到现有的页面中用于构建动态功能,动态表格渲染。...Angular 全面的解决方案:Angular是一个由Google维护平台,提供了从前端开发到测试一整套解决方案。它内置了大量功能,依赖注入、路由、表单处理等。...开发和测试 组件封装:封装每个组件为一个独立文件或模块,这有助于在不同页面和项目中重用。 交互式原型测试:在开发过程中,创建交互式原型来测试组件交互和样式,确保它们符合用户体验和设计要求。

    15710

    Angular实战之使用NG-ZORRO创建一个企业级中后台框架(新手入门篇)

    这篇文章就是为了让大家熟悉了解我们该如何在Angular目中使用到NG-ZORRO UI组件库搭建后台管理框架。...NG-ZORRO特性: 提炼自企业级中后台产品交互语言和视觉风格。 开箱即用高质量 Angular 组件库,与 Angular 保持同步升级。...使用 TypeScript 构建,提供完整类型定义文件。 支持 OnPush 模式,性能卓越。 数十个国际化语言支持。 深入每个细节主题定制能力。...执行以下命令,@angular/cli 会在当前目录下新建一个名称为 YyFlight-NG-ZORRO文件夹,并自动安装好相应依赖。 ng new YyFlight-NG-ZORRO ?...配置: 注意:执行以下命令后将自动完成 ng-zorro-antd 初始化配置,包括引入国际化文件,导入模块,引入样式文件等工作。

    3.4K11

    「React 基础」在 React 项目中使用 ES6,你需要了解这些

    何在目中,恰当运用ES6这些新特性,这也是本篇文章要给大家介绍。 React简介 关于 React 大家肯定不陌生吧,目前是三大主流前端框架之一,发展迅速。...相比其它 JavaScript 框架(Angular,Vue 或 Backbone),React学习曲线很平缓,在比较短时间就能入门,并且其可以使用现代 ES6 语法进行编写,并且不需要学习太多设计模式...在React项目中,运用 ES6+ 新特征 在 React 简介中,介绍过了,React 项目中我们可以使用 JavaScript 最新语法(ES6,ES7和ES8)。...在 React 项目中,我们可以将一个值很容易添加到另外一个数组中,类似push方法,例如我们有一个待办事项列表,我们需要添加一个新待办事项,我们需要调用 setState 方法来添加待办事项内容...接下来我们来看看结构赋值是如何在我们React项目中运用,我们可以将组件属性分配给变量,示例代码如下: ?

    3.1K30

    如何实现前端新手引导功能?

    大家好,是若川。持续组织了近一年源码共读活动,感兴趣可以 点此扫码加我微信 lxchuan12 参与,每周大家一起学习200行左右源码,共同进步。...小而快:库文件较小使得引导过程流畅直观。JavaScript 文件整体大小为 10KB,CSS 为 2.5KB。 用户友好:提供可以根据喜好选择各种主题。...浏览器兼容性:适用于所有主流浏览器, Google Chrome、Mozilla Firefox、Opera、Safari 等 。 文档完善:文档包含要介绍每个元素样本和示例。...可以通过以下命令来安装 Intro.js: npm install intro.js - save 安装完成后,只需三个简单步骤即可将其添加到项目中: 将 JavaScript 和 CSS 文件(intro.js...和 introjs.css)添加到项目中

    2.9K60
    领券