webpack之entry入口问题

最新推荐文章于 2025-07-21 08:00:00 发布

原创最新推荐文章于 2025-07-21 08:00:00 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

Webpack 专栏收录该内容

10 篇文章

订阅专栏

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

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

简介

webpack通过context和entry这两个配置项来共同决定入口文件的路径，在配置入口时，实际上做了两件事：

确定入口模块位置，默认是src/index.js
定义chunk name,如果工程只有一个入口，那么默认其chunk name为main;如果有多个入口，我们需要为每个入口定义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'
}

打包之后路径如下：