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

在子目录中构建webpack供应商文件

是指在使用webpack构建项目时,将第三方库或模块单独打包成一个供应商文件,以便在项目中引用。这样做的好处是可以提高项目的加载速度,减少重复加载的代码量。

具体步骤如下:

  1. 在webpack配置文件中,通过entry属性指定入口文件,可以是一个或多个文件。
  2. 在output属性中,通过设置filename属性指定输出的供应商文件名,一般命名为vendor.js。
  3. 在plugins属性中,使用CommonsChunkPlugin插件将第三方库或模块打包成供应商文件。配置如下:
代码语言:txt
复制
const webpack = require('webpack');

module.exports = {
  entry: {
    app: './src/index.js',
    vendor: ['react', 'react-dom', 'lodash'] // 第三方库或模块
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor'
    })
  ]
};

在上述配置中,entry属性中的vendor数组指定了需要打包成供应商文件的第三方库或模块,如react、react-dom和lodash。CommonsChunkPlugin插件会将这些库或模块打包成vendor.bundle.js文件。

使用webpack构建后,会在输出目录(如dist目录)中生成vendor.bundle.js文件。在项目中引用供应商文件时,只需在HTML文件中添加以下代码:

代码语言:txt
复制
<script src="vendor.bundle.js"></script>

这样就可以在项目中使用打包好的供应商文件了。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)、腾讯云对象存储(COS)。

腾讯云云服务器(CVM)是一种可弹性伸缩的云计算服务,提供了多种配置和操作系统选择,适用于各种应用场景。详情请参考:腾讯云云服务器

腾讯云对象存储(COS)是一种安全、低成本、高可靠的云端存储服务,适用于存储和处理各种类型的文件和数据。详情请参考:腾讯云对象存储

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

相关·内容

webpack原理(2):ES6 module在Webpack中如何Tree-shaking构建

AST语法树可以把一段 JS 代码的每一个语句都转化为树中的一个节点。DCE Dead Code Elimination [ɪˌlɪmɪˈneɪʃn],在保持代码运行结果不变的前提下,去除无用的代码。...ES6 module 则有诸多限制:比如说只能在文件的顶部 import(CommonJS 的 require 语法允许在文件的任意位置调用),export { ... } 语法保证了导出的变量不会是...你应该避免将整个库导入到单个 JavaScript 对象中。当你这样做时,你是在告诉 Webpack 你需要整个库, Webpack 就不会摇它。以流行的库 Lodash 为例。...3 和 4 默认支持,webpack2需要特别配置webpack2根据 Webpack 官网的提示,webpack2 支持 tree-shaking,需要修改配置文件,指定 babel 处理 js 文件时不要将.../p/43844419转载本站文章《webpack原理(2):ES6 module在Webpack中如何Tree-shaking构建》,请注明出处:https://www.zhoulujun.cn/html

78910
  • Webpack中的文件指纹

    什么是文件指纹? 文件指纹就是打包后输出的⽂件名的后缀,主要用来对修改后的文件做版本区分。 2. 文件指纹有哪几种? 1. ...Hash:和整个项⽬的构建相关,只要项⽬⽂件有修改,整个项⽬构建的 hash 值就会更改,一般用于图片设置; 2. ...Chunkhash:与 webpack 打包的 chunk 有关,不同的 entry 会⽣成不同的 chunkhash 值,一般用于设置JS文件; 3. ...Contenthash:根据⽂件内容来定义 hash ,⽂件内容不变,则 contenthash 不变,一般用于设置CSS文件; 3....图片的文件指纹设置; 图片文件的指纹设置使用file-loader,常用的占位符的含义如下: 图片的文件指纹设置如下: 'use strict'; const path = require('path

    1.1K20

    webpack中的mainself和构建目标

    manifest 在使用 webpack 构建的典型应用程序或站点中,有三种主要的代码类型: 1.你或你的团队编写的源码。...包括浏览器中的已加载模块的连接,以及懒加载模块的执行逻辑。 Manifest 那么,一旦你的应用程序中,形如 index.html 文件、一些 bundle 和各种资源加载到浏览器中,会发生什么?...通过使用 manifest 中的数据,runtime 将能够查询模块标识符,检索出背后对应的模块。 问题 所以,现在你应该对 webpack 在幕后工作有一点了解。“但是,这对我有什么影响呢?”...这是因为,runtime 和 manifest 的注入在每次构建都会发生变化。...构建目标(targets) 因为服务器和浏览器代码都可以用 JavaScript 编写,所以 webpack 提供了多种构建目标(target),你可以在你的 webpack 配置中设置。

    61600

    linux中统计目录中的文件和子目录数

    使用ls和grep命令配合 统计当前目录下文件的个数,不包括目录 > ls -l | grep "^-" | wc -l 统计文件夹下文件个数,包括子文件 > ls -lR | grep "^-" |...wc -l 9188 统计文件夹下目录个数,包括子目录 > ls -lR | grep "^d" | wc -l 540 使用find和wc 统计当前目录下所有的普通文件,包含隐藏文件,不包含子目录下的文件...> find /etc -maxdepth 1 -type f | wc -l 统计目录中的文件数量,包含隐藏文件,包含子目录的文件 > find /etc -type f | wc -l 统计当前目录的下的子目录数...,包含隐藏目录,不包含子目录下的目录 > find /etc -maxdepth 1 -type d | wc -l 统计当前目录的下的子目录数,包含隐藏目录,包含子目录下的目录 > find /etc...linux中的15个基本ls命令示例 Linux之ls命令 linux中35个find案例 linux中计算行数,字数,字符数的10个wc命令示例

    3.2K20

    webpack构建了不相关的文件夹

    某次开发完后,构建,发现一个小应用,怎么构建出来这么多chunk文件?...tmp.png ,这么多文件,而且看里面很多1k的小文件,打开看看如下: tmp.png 竟然把md文件,index.html等杂七杂八的文件都打包了。而且,还有一些,不是本项目的文件也打包了!...用webpack写import 和 require 跟nodejs里面的,真的完全不一样啊。 比如,我想动态的导入一个文件: import('./app'+path+'/util') => /^\....*\/util$/ 抱歉,这个行不,webpack是静态的,不不知动态的path是哪些值,所以,它把 path当做 * ,去全部匹配了,因此会把所有类型的文件打包!!!...原因:这里用的是webpack环境变量,,环境变量在构建时会被转换成明确的字符,所有没问题。 因此,你可以多用环境变量。

    74920

    在 Gitlab 中构建 Docker 镜像

    常见的镜像生成流程 生成执行文件(JAR/PHP/PY 等等) 将执行文件和 Dockerfile 等支持文件加入到镜像目录 构建指定 Tag 的镜像 登录镜像库 推送镜像 相对于在单一服务器执行这些过程的情况...如何在以 Pod 形式运行的 Runner 中构建镜像并完成推送。 跨 Runner 的文件共享 Gitlab 提供了两种方式的文件共享方式,用于在不同 Runner 之间传递文件。...Cache:用于在构建过程中传递一些中间文件,无需长久保存,例如下载的依赖文件。 Artifact:构建过程生成的交付目标,需要保存一定时间,例如生成的 JAR、测试报告等交付文件。...在构建环节中简单加入这一字段即可,例如: jar: stage: build tags: - maven script: - mvn package artifacts: paths: - target...这里生成的 JAR 文件将在后续用来构建 Docker 镜像。 在 Pod 内构建 Docker 镜像 Docker 提供了一个 dind 镜像,意思就是“Docker in Docker”。

    2.3K40

    Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十)打包项目并发布到子目录

    Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十)打包项目并发布到子目录 前情回顾 通过上一章《Vue2+VueRouter2+Webpack+Axios 构建项目实战...我们在浏览器中输入 http://127.0.0.1:3000 就应该可以访问了。 当然,会报错,说是接口找不到,404错误。...只不过,最终代码放到真实的服务器环境去和后端接口在一个 http 服务下面的话,就不存在这个问题了。 好,我们就跑起来了。 将项目打包到子目录 刚刚,我们是将文件,打包为根目录访问的。...注意,我访问的不是根目录,而是 /dist/ 这个子目录哦,这里是访问的我们打包的文件的。...实际开发中,你只需要把 dist 文件夹中打包好的文件,给运维他们,让他们去部署到真实的服务器环境就好了。

    93580

    构建效率大幅提升,webpack5 在企鹅辅导的升级实践

    其实现在各大博客网站已经有很多关于 webpack5 的文章,但真正通过业务实践并获得第一手数据的并不多,所以今天就给大家介绍一下 webpack5 在企鹅辅导业务中的升级与实践 。...再次构建时在缓存的基础上增量编译长期缓存。...test.js  里引用的 css 文件,如上代码,构建结果如下: 由上图可知,仅仅改了其中一个文件,结果构建出来的所有 js 文件的 hash 值都变了,不利于浏览器进行长效缓存。...在 wepack5 中打包这样的代码,构建会提示开发者进行确认是否需要 node polyfill,如下图: 如果确认不需要 polyfill,可根据提示设置 fallback,如下: resolve...一些更实用的用法需要我们在实际使用中继续探索,发挥 webpack5 更大的价值。 6、其他新特性 1、在 webpack4 中标记过期的功能都已经在 webpack5 移除了。

    1.3K20

    5-6~7 eslint 在 webpack 中的配置

    eslint 其实与 webpack 没有任何关系,两者并不互相依赖,甚至一般情况下我们并不会在 webpack 中进行 eslint 的配置。...2. eslint 配置 首先安装 eslint: npm i eslint -D 然后利用命令初始化一个配置文件: npx eslint --init 选择如下: ?...globals 脚本在执行期间访问的额外的全局变量。也就是 env 中未预定义,但我们又需要使用的全局变量。 extends 检测中使用的预定义的规则集合。...结合 webpack 使用 不一定每个 ide 都有插件,如果不想使用插件,又要实时提示报错,我们可以结合 webpack 的打包编译功能来实现。...我们可以在 webapck 的 devserver 下加一个配置参数: overlay: true, 再次打包,如图: ?

    1.5K60
    领券