如何将所有node_modules放在单独的捆绑包中？
将所有node_modules放在单独的捆绑包中可以通过使用工具如Webpack或Parcel来实现。这些工具可以将前端项目的所有依赖模块打包到一个或多个捆绑包中，以便在浏览器中加载。
具体步骤如下：
- 配置打包工具：首先，需要在项目中配置打包工具，如Webpack或Parcel。这些工具通常使用配置文件（如webpack.config.js）来指定打包的入口文件和输出文件等信息。
- 安装依赖：在项目根目录下运行命令安装所需的打包工具和相关插件。例如，对于Webpack，可以运行
npm install webpack webpack-cli --save-dev来安装Webpack及其命令行工具。 - 配置入口文件：在配置文件中指定打包的入口文件。通常，入口文件是项目的主JavaScript文件，它会引入其他模块。
- 配置输出文件：在配置文件中指定打包后的输出文件的名称和路径。可以使用占位符（如[name]、[hash]）来生成唯一的文件名。
- 配置模块解析规则：在配置文件中指定如何解析模块的规则。例如，可以配置解析JavaScript文件时使用Babel进行转译，解析CSS文件时使用CSS预处理器等。
- 运行打包命令：在命令行中运行打包命令，将所有依赖模块打包到单独的捆绑包中。例如，对于Webpack，可以运行
npx webpack来执行打包。 - 使用打包后的文件：打包完成后，会生成一个或多个捆绑包文件。可以将这些文件引入到HTML文件中，或在Node.js环境中使用。
通过将所有node_modules放在单独的捆绑包中，可以减少浏览器加载的文件数量，提高页面加载速度。此外，还可以通过使用缓存等技术来进一步优化加载性能。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云Webpack：https://cloud.tencent.com/product/twp
- 腾讯云Parcel：https://cloud.tencent.com/product/parcel
相关·内容
1回答
如何将所有node_modules放在单独的捆绑包中？
webpack
如何将从node_modules加载的所有内容放在单独的捆绑包中？我应该使用什么插件或标准配置？
浏览 3提问于2017-08-30得票数 0
回答已采纳
1回答
Webpack重复数据删除webpack捆绑包
webpack、dedupeplugin
webpack会不会对已经和webpack捆绑在一起的套餐进行去重呢？------------------| | react@15.5 | | jquery@3.1 | | Webpack bundle 1 |
Webpack app捆绑包会包含Webpack app捆绑包会包含2份jquery吗？
浏览 7提问于2017-05-15得票数 0
2回答
如何在angular.json中包含标题的脚本
javascript、angular、aframe
我想将<head>标记中的aframe作为单独的包使用angular.json配置导入。在angular.json中，我有要从node_modules导入的脚本： "scripts": [] 它被捆绑并导入到html主体的<
浏览 9提问于2019-12-20得票数 10
回答已采纳
1回答
来自多个包的Sourcemap
javascript、webpack-2、source-maps
我有一个主应用程序foo与webpack2捆绑一些node_modules。其中一个模块是bar，它还与webpack2绑定了源代码映射。我曾经将bar包作为单独的脚本注入到foo index.html中，而源代码映射在devtools中运行得很好。现在，foo将bar和其他node_modules捆绑到一个vendor包中，然后注入到index.html中。在devtools<e
浏览 1提问于2017-05-16得票数 0
回答已采纳
1回答
如何仅使用nx构建和打包相关的依赖项？
typescript、npm、dependency-management、nrwl-nx、nrwl
我有一个使用nx的项目，其中包含许多包。我的问题是，我只有一个package.json文件，所以如果我只想构建一个包，我仍然必须使用npm install构建根项目。这是一个问题，因为在CI/CD步骤中，我必须构建整个项目，这需要花费太长时间，而且它还生成一个node_modules文件夹，该文件夹变得巨大(3GB)，这也使我的包大小过大。如何构建单个包，使node_modules文件夹只包含包</
浏览 5提问于2022-08-16得票数 3
回答已采纳
2回答
如何在Mac OS X上的文件夹复制过程中关联文件
macos、installation、file-association
我参与了一个应用程序的开发，该应用程序打算部署在多个桌面系统上，包括Macintosh。
我们的团队决定对Macintosh进行拖放安装。最初，这些文件被放在应用程序包中，但这被发现是有问题的，因为用于用户界面的跨平台库不允许其他人访问包中的内容。此外，强迫用户深入到捆绑包中查找内容并不能提供很好的用户体验。为此，我们决定将这些示例文件和其他文件从捆绑</
浏览 2提问于2013-06-01得票数 0
1回答
Webpack，巴别塔- node_modules不排除在捆绑中
typescript、webpack、babeljs、terser
我正在尝试找出我的巴别塔配置出了什么问题，webpack。构建之后，我的包中就有了node_modules 我尝试了.babel-rc、terser和awesome loader(排除/节点_模块/)的不同配置，但node_modules仍然在捆绑包中。: ["react-hot-loader/babel"] }, 'sourc
浏览 24提问于2019-10-04得票数 0
回答已采纳
1回答
Webpack优化splitChunks生成的webpack文件
javascript、webpack、webpack-4、webpack-splitchunks
它似乎主张多个单独的文件(通常)是最好的方法。我已经创建了一个简单的捆绑包，其中包含一个导入flexslider的js文件： import "flexslider"$('.flexslider').flexslider({
}); 显然，flexslider位于node_modules文件夹中
浏览 16提问于2019-05-04得票数 0
1回答
我正在尝试解决包拆分问题，但是文档让人困惑。我的目标是将bundle.js拆分成两个包；addon.js包含我的应用程序逻辑，vendor.js包含我所有的NPM模块。这是我当前的优化属性 optimization: { splitChunks: { name:true, defaultVendors:
浏览 21提问于2021-04-15得票数 0
回答已采纳
2回答
Webpack 2:将库、供应商和应用程序分成不同的文件
webpack、webpack-2、code-splitting、commonschunkplugin
假设我有一个丰富的应用程序，它使用了很多第三方模块，包括提交、矩、公理、react。
应用程序的代码存储在单独的文件中。我试着用不同的方式玩CommonsChun
浏览 0提问于2017-04-04得票数 1
1回答
具有promises的webpack异步模块
webpack、code-splitting
我正在考虑在我现有的基于淘汰型的SPA框架中使用webpack，以便在用户浏览网站时延迟加载模型而被接受的答案似乎与我试图实现的目标非常相似。基本上，每个SPA页面都由从服务器以JSON格式返回的组件集合组成。因此，我
浏览 6提问于2016-09-22得票数 0
1回答
angular2 rc脚本包
angular、rc、bundles
我尝试将我的应用程序从0.17迁移到RC 0，我有一些问题。在0.17中，我们使用这些脚本(包)<script/http.dev.js"></script>
<script src="node_modules</
浏览 4提问于2016-05-19得票数 2
回答已采纳
1回答
将CommonsChunkPlugin与只有一个需要的入口一起使用时出现问题
javascript、webpack
使用webpack v2，我有两个入口点，这两个入口点应该生成两个可以分别加载到同一页面或不同页面上的包。我还使用CommonsChunkPlugin将node_modules文件夹中的所有依赖项提取到只有第一个包需要的第三个包中。当在页面上单独加载第二个捆绑包时，它不会被初始化，因为它似乎需要之前(托管webpackJsonp函数)加载过commonChucnk
浏览 0提问于2018-02-13得票数 0
1回答
在中，作者提到了如何将每个node_module拆分为一个单独的文件，如npm-package1.js、...2.js等。const prodWebpackConfig = { optimization: { splitChunks: {
cacheGr
浏览 1提问于2019-07-21得票数 2
回答已采纳
1回答
“类型:模块”-未定义未定义的ReferenceError: require
javascript、webpack、babeljs
我决定把我的webpack 5+ babel项目从需求模块移到es6模块。我在package.json中添加了"type: module“，并更改了js文件中导入的所有要求如何解决这个问题？
浏览 4提问于2021-07-19得票数 0
回答已采纳
1回答
Apache服务混合部署方法
jenkins、amazon-ec2、apache-servicemix、bundles
应用程序由不同的服务组成，每个服务都是作为单独的Maven项目(捆绑包).During开发创建的，我们实际上是单独构建每个服务，以便部署它，它被放在deploy文件夹中。此外，我们必须从容器中卸载包(比如karaf)，然后从控制台重新安装它，以使新的更改生效。这在开发阶段是很好的。
现在，我们希望将代码部署到一个UAT环境(亚马逊EC2)，以便客户端进行测试。我们
浏览 4提问于2017-10-16得票数 0
1回答
如何将NPM包与现有的C#/MVC项目一起用于Azure上的git部署？
asp.net-mvc、visual-studio、azure、npm、webpack
我有一个相当大的.Net MVC应用程序。服务器端代码都是C#，我有大量的客户端TS。我所有的JS库都在脚本目录中，大多数都是由Nuget包放在那里的。我所有的JS都是使用System.Web.Optimization.ScriptBundles捆绑的。我想把一切都换成NPM。我有NPM的设置，和所有必要的</e
浏览 3提问于2017-05-11得票数 1
回答已采纳
1回答
与polymer.json中定义的shell相比，捆绑包组件位于不同的供应商html中
polymer、polymer-cli
我正在尝试通过聚合物cli捆绑我的聚合物应用程序。我的应用程序将一个简单页面的数据提升到275kb。在我的polymer.json文件中，我使用src/ my -app.html作为外壳将我的所有自定义聚合物元素分段。问题是在构建我的应用程序之后，我的src/ my -app.html在捆绑的文件夹中有273kb的大小。考虑到我将Angular放在</e
浏览 7提问于2017-02-13得票数 0
3回答
npm发布忽略node_modules内部的文件
javascript、node.js、npm、package
我已经创建了npm包。在这个包中，我使用了一些模块，我将它们放到node_modules中，以便能够将它们作为“模块”，例如，我有模块node_ modules / my -module.js，这是我在代码中所需要的(‘my-module现在我做"npm发布“，然后在另一个项目中，我做"npm i”来安装我的模块。它已经安装了，但是没有我的模块放到node_modules中。我尝试将以下
浏览 0提问于2016-01-05得票数 4
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
