webpack之entry入口问题

本文深入解析Webpack中context和entry配置项的作用与用法,包括如何确定入口模块位置、定义chunkname,以及entry的多种类型(字符串、数组、对象、函数)的使用场景。

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

简介

webpack通过contextentry这两个配置项来共同决定入口文件的路径,在配置入口时,实际上做了两件事:

  • 确定入口模块位置,默认是src/index.js
  • 定义chunk name,如果工程只有一个入口,那么默认其chunk namemain;如果有多个入口,我们需要为每个入口定义chunk name,来作为该chunk的唯一标识

context

context可以理解为资源入口的路径前缀,在配置时要求必须使用绝对路径的形式,这时候我们可以借用node的路径拼接函数---path.join(),将__diranme(node内置全局变量,值为当前文件所在的绝对路径)与dist(输出目录)连接起来。得到最终的资源输出路径,可以看以下例子:

// 入口路径为 /src/main.js
const path = require('path');
module.exports = {
    mode:'development',
    context:path.join(__dirname,'./src'),
    entry: './main.js'
}

 

entry

entry可接受四种类型,字符串,数组,对象,函数。

字符串

entry: './app.js'
//等价于
entry:{
    main:'./app.js'
}

数组

entry:['./xxx1.js','./xxx2.js']
//等价于
entry:{
      main: ['./xxx1.js', './xxx2.js']
}

对象

entry:{
    <key>: <value>
}

这里需要注意的是对象中key可以是简单的字符串,比如:’app’等。并且对应着output.filename配置中的[name]变量

entry: {
    'hty': './app.js'
},
output: {
    path: './dist',
    filename: '[name].js'
}

key还可以是路径字符串。此时webpack会自动生成路径目录,并将路径的最后作为[name]。这个特性在多页面配置下也是很有用的。

entry: {
    'path/of/entry': './deep-app.js',
},
output: {
    path: './dist',
    filename: '[name].js'
}

打包之后路径如下:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值