首页
学习
活动
专区
工具
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 上安装 Angular:Angular 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 文件中添加对组件、指令和管道的引用。

61400

【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,并在前端框架中进行调用。

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

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

    4K20

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

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

    9310

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

    1.5K60

    Angular中sweetalert弹框的使用详解

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

    2.8K40

    有奖征集:云开发CloudBase的101种玩法

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

    3.4K10

    前端框架选择与性能比较:找到最适合你的前端工具

    在前端开发的广阔天地里,选择一个合适的前端框架就像找到一个得力的工具,不仅能提高开发效率,还能提升项目的整体性能。然而,市面上的前端框架琳琅满目,如何在众多选择中做出正确决策,成为了许多开发者的困惑。...今天,我将和大家聊聊前端框架的选择与性能比较,帮助你找到最适合你的前端工具。引言初次接触前端开发时,我也曾面临各种框架的选择难题。...从早期的jQuery到如今的React、Vue和Angular,每个框架都有其独特的优势和适用场景。...渐进式框架:可以逐步集成到项目中,不需一次性重写整个项目。单文件组件:结构清晰,开发效率高。缺点:小众市场:相较于React,企业应用较少,求职市场不占优势。...React适合用于构建大型复杂项目,Vue则适合快速上手开发中小型项目,Angular则适用于企业级应用和复杂场景。希望通过本文的介绍,能够帮助大家在实际项目中做出明智选择。

    23410

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

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

    17210

    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.6K11

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

    大家好,我是若川。我持续组织了近一年的源码共读活动,感兴趣的可以 点此扫码加我微信 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)添加到项目中。

    3.1K60
    领券