由webpack创建的index.html包括vendor.js和app.bundle.js，它们位于相同的dist文件夹中
webpack是一个现代化的前端构建工具，它可以将多个前端资源打包成一个或多个bundle文件，以优化网页加载速度和性能。在使用webpack构建前端项目时，通常会生成一个index.html文件作为入口文件，该文件会引入生成的bundle文件。
index.html是网页的主要入口文件，它包含了网页的结构和内容。在使用webpack构建的项目中，index.html通常会引入两个bundle文件：vendor.js和app.bundle.js。
vendor.js是由webpack生成的第三方库和依赖的打包文件。它包含了项目中使用的各种第三方库和框架，如React、Vue、jQuery等。通过将这些第三方库打包成一个文件，可以减少网页加载时的请求次数，提高网页的加载速度。
app.bundle.js是由webpack生成的应用程序的打包文件。它包含了项目中自己编写的代码和逻辑。通过将应用程序的代码打包成一个文件，可以减少网页加载时的请求次数，提高网页的加载速度。
这两个bundle文件通常会被放置在相同的dist文件夹中。dist文件夹是webpack构建过程中生成的目标文件夹，用于存放打包后的文件。在项目构建完成后，可以将dist文件夹中的文件部署到服务器上，供用户访问。
总结：
- index.html是由webpack创建的网页入口文件，用于引入生成的bundle文件。
- vendor.js是由webpack生成的第三方库和依赖的打包文件，用于减少网页加载时的请求次数。
- app.bundle.js是由webpack生成的应用程序的打包文件，包含了项目中自己编写的代码和逻辑。
- 这两个bundle文件通常会被放置在相同的dist文件夹中，用于部署到服务器上供用户访问。
腾讯云相关产品推荐：
- 腾讯云对象存储（COS）：用于存储和管理静态资源文件，如bundle文件。链接地址：https://cloud.tencent.com/product/cos
- 腾讯云CDN：用于加速静态资源文件的分发，提高网页的加载速度。链接地址：https://cloud.tencent.com/product/cdn
- 腾讯云云服务器（CVM）：用于部署和运行前端项目，提供稳定可靠的计算资源。链接地址：https://cloud.tencent.com/product/cvm
相关·内容
我的webpack配置如下path: __dirname + '/dist',filename: isProd ? '[name].)}
但是当我运行webpack时，它会在dist文件夹中创建index.html文件，其中包含vendor.js和
浏览 27提问于2016-07-29得票数 1
1回答
我有一个带有webpack和咕噜的角2码。在开发模式下，我使用webpack开发服务器进行加载，并将其作为一个繁重的任务运行。在构建用于生产部署的代码时，我使用Grunt执行所有的细化等操作，并创建一个dist/文件夹。我读到webpack开发服务器不应该用于生产部署。我想要的是，我<em
浏览 4提问于2016-09-08得票数 4
有两个错误，在运行webpack的瞬间，但在vs2015中做一个建筑的瞬间没有错误 index.html 426:18678/dist/ap
浏览 2提问于2016-11-22得票数 0
当我运行：webpack-dev-server时，它编译代码并在浏览器中给出输出。webpack.config.babel.js
import HtmlWebpackPlugin from 'html-web
浏览 1提问于2017-10-01得票数 2
我一直在研究的教程，它们巩固了我对webpack如何将你的整个前端捆绑到一个脚本中的理解，该脚本由一个简单的HTML页面运行，如下所示：<head></body>该文件位于</em
浏览 14提问于2020-02-19得票数 0
回答已采纳
我有一个角4/Django应用程序，在Django应用程序中的所有角代码。这个角形应用程序是用webpack开发的。我希望webpack将.js包输出到“静态”文件夹中，将"index.html“文件输出到”模板“文件夹中。/移动index.html，但是我也需要这些标记来使用Django的静态文件。[hash].js和Django模
浏览 1提问于2017-10-05得票数 3
我正在尝试使用webpack来分块我的react应用程序，但是什么都没有加载，并且它显示vendor.js显示为0字节。我做错了什么？我想我的index.html出了点问题。vendor.js和index.js都位于src文件夹中。我已经试过了，但没找到var webpack = require('webpack');
mo
浏览 23提问于2017-02-24得票数 1
回答已采纳
总的来说，我对webpack来说是个新手。真的只有几天。在很大程度上，我感觉我在设置和集成webpack到我的本地开发环境方面取得了一些相当不错的进展。在此过程中，有不少bug和命令行错误，但到目前为止，我能够解决其中的大多数问题。大声喊出Maxmillian Schwärzmuller关于Webpack的YT短篇系列，让我开始吧。现在，我正在尝试重新利用/扩展我学到的一些概念，但是我还没
浏览 23提问于2018-08-17得票数 1
我希望文件夹/dist/中有jQuery ui资产，它们应该从应用程序中加载。我的webpack配置中有这个： context: path.resolve(__dirname, "app"), filename: 'app.bundle.js'
浏览 1提问于2016-12-07得票数 0
回答已采纳
以下是我的(简化的)角2应用程序文件夹结构：这是我的webpack.config.js：var HtmlWebpackPlugin/dist', chunkFilename: "[id].bundle.js",
浏览 3提问于2016-08-01得票数 0
但是，我很难让他们玩得很好，因为在默认情况下，Browserify拒绝了对所有模块的全局范围访问。file1.js的内容更改为以下内容来实现的；到目前为止，这已经足够有效了，但是现在我在加载时区库(MomentJS的一个扩展Timezone的文档意味着两个脚本都应该在窗口全局范围上运行，方法是将它们添加为像这样的脚本标记；
<script src="mom
浏览 4提问于2017-03-31得票数 2
回答已采纳
我知道webpack编译的捆绑包不会写入全局名称空间。
但是，将webpack编译的东西(例如:由vendor.js创建的splitChunks)导入到一个非webpack项目中，最佳实践是什么呢？我有一些旧的后端代码，它逐行创建html文件-line。在这里，我想包括和重用一些新的UI组件是捆绑的。另外，在webpac
浏览 0提问于2018-05-23得票数 0
1回答
我使用webpack文件加载程序从pug模板文件夹输出一堆编译好的html文件。
我希望将html文件放在输出目录中，放到它们在源/pug/文件夹中时所处的相同文件夹结构中，减去pug文件夹本身。例如，如果在/pug/文件夹中，其中一个文件是/pug/layouts/index
浏览 2提问于2017-02-20得票数 0
回答已采纳
更改如下所示：其中，a_root是所有后端文件所在的应用程序根文件夹，web.config是。所以，为了不弄乱后台和前端文件，我想把所有的前端文件放在一个子文件夹/dist中。我想要做的是这样的。我的项目中有一个index.html文件。我将基本标签更改为：
<
浏览 4提问于2019-11-17得票数 1
3回答
我正在使用react创建一个使用webpack的网站。目前，我的webpack.config.js如下所示：var webpack = require('webpack');
module.exports但是，我希望我的bundle.js文件驻留在根文件夹之外的另一个文件夹中。因此，
浏览 3提问于2016-02-04得票数 0
回答已采纳
1回答
这是我的package.json。我为webpack.I添加了依赖项，我对我的决定和脚本是否正确感到困惑？warnings: false })};webpack.config.js给出了名为‘dist / app.bundle.js’的捆绑输出文件(在dist文件夹中)，但是我在将app.bundle.js文件插入到html页面时
浏览 0提问于2017-03-14得票数 2
我有一个我正在做的项目的文件夹限制：├── dist/├── index.html├── node_modules/现在，我只希望dist文件夹的内容位于master分支(而不是dist文件夹本身)，而不希望在d
浏览 1提问于2018-02-10得票数 0
回答已采纳
当我转到localhost:5000时，我的index.html文件没有加载。有没有办法让Webpack开发者服务器获取我的根index.html？做这件事最好的方法是什么？文件夹结构： ├── dist├── src│ └── app.js├── package-lock.json├── package.json
└──
浏览 118提问于2021-10-31得票数 0
回答已采纳
我想建立一个角度1.x应用程序从零开始使用webpack 2。我很难找到webpack.config的最佳配置，entry和output用于生产(意思是，所有的代码、样式和模板都缩小了，没有代码重复)。我的主要问题是如何设置webpack.config，以便它识别项目文件夹结构中的所有部分，如下所示：我的当前配置文件，以供参考(无法看到子文件夹)：
var HtmlWebpackPlug
浏览 4提问于2017-04-24得票数 2
回答已采纳
我是webpack的新手，我有一个小项目在当地运行良好，但是当我部署到Heroku时，我会得到以下错误： DIST: path.resolve(__dirname, 'dist'),{
temp
浏览 2提问于2018-02-13得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
