文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

由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文件夹中，用于部署到服务器上供用户访问。

腾讯云相关产品推荐：

相关搜索:region中文名称如何查看解析是否生效容器系统服务如何更新如何开启端口8080容器镜像服务删除镜像容器无法连接到rds如何在手机上设置邮箱region用户idregistry部署如何配置3306端口
相关搜索:
页面内容是否对你有帮助？
有帮助
没帮助

相关·内容

webpack从0到1构建

​ 绝大部分生产项目都是基于cli脚手架创建一个比较完善的项目，从早期的webpack配置工程师到后面的无需配置，大大解放了前端工程建设。...2、output输出(把依赖的文件输出一个指定的目录下) 主要会根据entry的入口文件名输出到指定的文件名目录中,默认会输出到dist文件中 const path = require('path').../src/app.js -o dist/app.js" }, 此时就会生成一个在dist文件,并且名字就是app.bundle.js 并且控制台上已经成功了 > webpack asset app.bundle.js.../dist2' --output-filename='[name]_[hash].bundle.js'" }, 会创建dist2目录并打包出来一个默认命名的main_ff7753e9dbb1e41a06a6...运行整个项目 我们已经创建了一个src/app.js的入口文件，现在需要在浏览器上访问，因此需要构建一个index.html,在根目录中新建public/index.html,并且引入我刚打包的js文件

1.2K10

使用Webpack提升Vue.js应用程序的4种方法（翻译）

考虑一下本文，对vue-cli模板中使用的Webpack配置进行概述，因为它们包含了我在这里讨论的相同优化。 1....但是，这些带有一个固有的问题：要么您的HTML标记需要使用笨拙的JavaScript字符串，要么您的模板和组件定义必须位于单独的文件中，从而使其难以使用。...您可以配置插件以检查依赖项是否来自node_modules文件夹，如果是，则将其输出到单独的文件vendor.js中： new webpack.optimize.CommonsChunkPlugin({...Webpack配置中： new HtmlWebpackPlugin({ filename: 'index.html' template: 'index.html', inject: true...但是，如果您的应用有多个页面，则拆分代码会更有效，因此每个单独的页面代码都位于单独的文件中，并且仅在需要时才加载 Webpack具有一项称为“代码拆分”的功能。

2.6K20

Webpack4 搭建 Vue 项目

前言 由于 Parcel 打包工具的影响，webpack4 也追求零配置搭建项目。而前阵子出现的 vue-cli 3.0也是基于 webpack4 零配置的思想创建的。...项目搭建 创建 createVue 文件夹，进入该文件夹， npm init 初始化项目 安装 webpack 四件套 npm i webpack webpack-cli webpack-dev-server...|--app.vue |--index.html // webpack.base.js // 存放 dev 和 prod 通用配置 const webpack = require('webpack...}, } }, }, }) 如此配置，则打包的 js 文件夹中会多一个 vendor.js 压缩CSS和JS代码 安装 optimize-css-assets-webpack-plugin...hash是跟整个项目的构建相关，只要项目里有文件更改，整个项目构建的hash值都会更改，并且全部文件都共用相同的hash值 chunkhash和hash不一样，它根据不同的入口文件(Entry

1K10

深入了解Webpack

一旦脚本经历了成功，你可以看到 DIST / bundle.js 在飞行中不生成的文件，但在你真正的创建 DIST / 文件夹。 剩下的唯一事情就是现在将 dist / 文件夹上传到Web服务器。.../src/index.html'), }) ], ... }; 然后，在您的源代码文件夹中创建一个新的 src / index.html 模板文件，并为其提供以下内容： <!...最后，我们已经能够使用Webpack自动创建 dist / bundle.js 和 dist / index.html 这两个文件。.../src/index.html'), }), ], ... }; 现在，每个Webpack构建都将擦除 dist / 文件夹的内容，然后从头开始创建新的 dist / index.html...该文件位于新的 build-utils 文件夹中。为了稍后在Webpack配置中区分正在运行的脚本，我们还向配置传递了一个环境标志（dev，prod）。

6.8K75

Webpack 详解

一旦脚本经历了成功，你可以看到 DIST / bundle.js 在飞行中不生成的文件，但在你真正的创建 DIST / 文件夹。 剩下的唯一事情就是现在将 dist / 文件夹上传到Web服务器。.../src/index.html'), }) ], ... }; 然后，在您的源代码文件夹中创建一个新的 src / index.html 模板文件，并为其提供以下内容： <!...最后，我们已经能够使用Webpack自动创建 dist / bundle.js 和 dist / index.html 这两个文件。.../src/index.html'), }), ], ... }; 现在，每个Webpack构建都将擦除 dist / 文件夹的内容，然后从头开始创建新的 dist / index.html...该文件位于新的 build-utils 文件夹中。为了稍后在Webpack配置中区分正在运行的脚本，我们还向配置传递了一个环境标志（dev，prod）。

6.2K20

深入了解Webpack 5

一旦脚本经历了成功，你可以看到 DIST / bundle.js 在飞行中不生成的文件，但在你真正的创建 DIST / 文件夹。 剩下的唯一事情就是现在将 dist / 文件夹上传到Web服务器。.../src/index.html'), }) ], ... }; 然后，在您的源代码文件夹中创建一个新的 src / index.html 模板文件，并为其提供以下内容： <!...最后，我们已经能够使用Webpack自动创建 dist / bundle.js 和 dist / index.html 这两个文件。.../src/index.html'), }), ], ... }; 现在，每个Webpack构建都将擦除 dist / 文件夹的内容，然后从头开始创建新的 dist / index.html...该文件位于新的 build-utils 文件夹中。为了稍后在Webpack配置中区分正在运行的脚本，我们还向配置传递了一个环境标志（dev，prod）。

3.5K30

vue-cli脚手架npm相关文件解读（1）webpack.base.conf.js

/config/index.js 下面是build/webpack.base.conf.js中相关代码和配置的说明 项目地址：https://github.com/SmileSmith（感觉不错的话帮忙打个星哈...~） /* * Webpack 基础配置文件，用于开发环境和生产环境 * 在prod.conf 和 dev.conf都会用merge的方式引用这里的配置 */ var path = require.../dist') path: config.build.assetsRoot, // 输出文件的名称：name是保持和entry入口的文件名一致 filename: '[name]....js', // 文件引用路径，例如index.html中引用vendor.js的src publicPath: process.env.NODE_ENV === 'production...vue.esm.js文件，不能在后面跟上 vue/vue.js 'vue$': 'vue/dist/vue.esm.js', // resolve('src') 其实在这里就是项目根目录中的

1.3K40

Webpack的异步加载原理及分包策略(深度好文，建议收藏)

'), }), new CleanWebpackPlugin(), // 所要清理的文件夹名称 ], } index.html 代码如下 <!...js 文件，并在 index.html 中引入。...webpackJsonp.push 的的值，两个参数分别为异步加载的文件中存放的需要安装的模块对应的 id 和异步加载的文件中存放的需要安装的模块列表。 在满足某种情况下，会执行具体模块中的代码。...分包策略 在 webpack 打包过程中，经常出现 vendor.js， app.js 单个文件较大的情况，这偏偏又是网页最先加载的文件，这就会使得加载时间过长，从而使得白屏时间过长，影响用户体验。...抽离 echart 和 iview 由上面分析可知，echart 和 iview 文件太大，此时我们就用到 webpack4 的 optimization.splitChunks 进行代码分割了，把他们单独抽离打包成文件

4.3K31

九：CSS-Tree-Shaking

我们首先编写 /src/css/base.css 样式文件，在文件中，我们编写了 3 个样式类。但在代码中，我们只会使用 .box 和 .box--big 这两个类。...所以，入口文件 /src/app.js 中创建了一个 标签，并且将它的类设为 .box // app.js import base from "..../dist/app.bundle.js">script> body> html> 按照我们的仿真的环境，最终 Tree Shaking 之后的效果应该是：打包后的 css 文件不含有 box-small...结果分析 命令行运行webpack打包后，样式文件被抽离到了 /dist/app.min.css 文件中。...文件内容如下图所示（_肯定好多朋友懒得手动打包_）： 我们在index.html 和 src/app.js 中引用的样式都被打包了，而没有被使用的样式类–box-small，就没有出现在图片中。

1.1K30

webpack的入口起点(entry points)

概念 入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。...2.entry——对象 现在，当你有一个包含多个HTML文件的多页应用，而不是单页应用的项目的时候（index.html和profile.html），你可以通过对象格式告诉Webpack去一次性生成多个...下面的配置会生成两个JS文件：indexEntry.js和profileEntry.js，你可以在index.html和profile.html分别使用它们： ?...使用方法： //profile.html //index.html <script src=”dist/indexEntry.js...下面的例子会生成三个文件：一个包含三个文件的vendor.js，一个index.js和一个profile.js。 ?

90010

十二：处理第三方JavaScript库

由于js变化实在太快，所以出现了多种引入和管理第三方库的方法，常用的有 3 中： CDN：标签引入即可 npm 包管理： 目前最常用和最推荐的方法 本地js文件：一些库由于历史原因，没有提供es6版本，...本文详细介绍了：在上面 3 种方法的基础上，如何配合webpack更优雅地引入和使用第三方js库。 0....由于js变化实在太快，所以出现了多种引入和管理第三方库的方法，常用的有 3 中： CDN：标签引入即可 npm 包管理： 目前最常用和最推荐的方法 本地js文件：一些库由于历史原因，没有提供es6版本，...webpack.ProvidePlugin会先从npm安装的包中查找是否有符合的库。.../dist/app.bundle.js">script> body> html> 命令行运行webpack进行项目打包： 在 Chrome 中打开index.html。

1.4K30

从手写SSR实现到轻松使用NUXT

页面渲染过程是在服务端完成，最终的HTML字符串，直接通过请求发送给客户端 传统的vue渲染 首先我们了解一下传统的vue实例是通过浏览器端渲染： 浏览器发送请求，访问某个页面，服务器会返回app.bundle.js...,index.html给浏览器，而index.html是一个空盒子。...创建一个vue项目，我们用脚手架创建的项目都是单入口的，只有一个main.js,上图可知我们需要两个入口，所以在main.js的同级目录下创建一个serve.js 服务端入口 serve.js 代码如下...$mount('#app') }) 复制代码 现在服务端和客户端都写好了，下一步就是打包。...当我们每次在page文件夹中新建文件(例如page1.vue)，都会生成一个路由(/page1) 3.

79030

vue-cli脚手架npm相关文件解读（2）webpack.prod.conf.js

/config/index.js 下面是webpack.prod.conf.js中相关代码和配置的说明，建议先查阅build/webpack.prod.conf.js  项目地址：https://github.com.../webpack.base.conf') var CopyWebpackPlugin = require('copy-webpack-plugin') // copy-webpack-plugin使用来复制文件或者文件夹到指定的目录的...= require('extract-text-webpack-plugin') // extract-text-webpack-plugin这个插件是用来将bundle中的css等文件生成单独的文件.../dist') path: config.build.assetsRoot, // 有区别，输出文件加上的chunkhash filename: utils.assetsPath...的runtime代码和module manifest代码提取到manifest.js文件中，防止修改了代码但是没有修改第三方库文件导致第三方库文件也打包的问题 new webpack.optimize.CommonsChunkPlugin

1.2K91

Webpack最佳实践

绝对路径和相对路径都能使用，但是要知道它们之间有一点差异。 使用绝对路径，将只在给定目录中搜索。使用相对路径，通过查看当前目录以及祖先路径。...当引入的文件不带后缀名，且有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。...new CleanWebpackPlugin(), ] } copy-webpack-plugin 拷贝插件，把某个文件夹导出到打包文件夹中，如文档文件夹（如 doc 文件夹）...绝对路径和相对路径都能使用，但是要知道它们之间有一点差异。 使用绝对路径，将只在给定目录中搜索。使用相对路径，通过查看当前目录以及祖先路径。...当引入的文件不带后缀名，且有多个文件有相同的名字，但后缀名不同，webpack 会解析列在数组首位的后缀的文件 并跳过其余的后缀。

3.2K20
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

    Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

    深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

    腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

    领券