Web核心概念_(第三章)_Entry与Output的基础配置

本文主要介绍了Webpack中Entry与Output的基础配置。包括entry打包入口文件的配置方式,打包多个文件时如何用占位符定义文件名,以及如何在打包时注入域名,还提到了output的publicPath配置项,最后给出了相关官方文档指引。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Entry与Output的基础配置
entry打包的入口文件,entry可以配置为字符串,也可以配置为对象,默认生成的名字是main.js,当然也可以在output中指定生成文字的名字。

  entry: {
    main: "./src/index.js"
  },

打包多个文件该如何配置
如果想要src目录下的index.js反复打包两次,生成两个文件,例如第一个文件叫做main.js,第二个文件叫做sub.js该如何做呢

  entry: {
    main: "./src/index.js",
    sub: "./src/index.js"
  },
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist')
  },

这样直接打包是会出错的,因为两个文件打包出来的名字都叫index.js,我们可以用占位符来定义打包完成的名字

  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },

这里的name指的是entry中对应的key值,这样打包就可以成功了生成的文件都在dist文件夹
在这里插入图片描述
打开生成的index.html,我们会发现同时引入了这两个js文件
在这里插入图片描述
打包注入域名
打包完成后的index.html,会将这个文件给后端,作为一个后端的入口文件,但是会将js文件上传到CDN这样的域名下面,那我们打包生成的index.html,我们希望不是引用main.js或者sub.js,希望前面多一个cdn地址的域名,类似于这种:
在这里插入图片描述
打包完成之后,注入到html上的js前面多带一个cdn的域名,手动改肯定不靠谱,可以在output里面配置。

  output: {
    publicPath: 'http://cdn.com/',
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
  },

运行打包,就可以生效了
在这里插入图片描述
如果项目后台需要引用index.html,而静态资源放在cdn上的情况下,这个时候就可以用到output的publicPath的配置项
这几个是配置entry和output的常用配置项
官方文档:DOCUMENTATION—> CONFIGURATION---->Output
DOCUMENTATION—> GUIDES —> Output Management (html-webpack-plugin以及clean-webpack-plugin)
DOCUMENTATION—> PLUGINS—> HtmlWebpackPlugin(plugin documentation)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值