简介
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'
}
打包之后路径如下: