webpack之entry入口问题

简介

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'
}

但会有一个问题，如果配置文件webpack.config.js不在根目录下，如在config文件下，这时候__dirname就等于xx/xx/config，而src并不在config文件夹里面，而是和它同级，这样就会报错，所以这样并不灵活，这时候就可以用node的path.resolve方法

path.resolve()

path.resolve()方法会把一个路径或路径片段的序列解析为绝对路径。

const a=path.resolve('/foo/bar', './baz');
console.log(a);//  '/foo/bar/baz'
const b=path.resolve('/foo/bar', '/baz');
console.log(b);//  '/baz'

那么上面的例子就可以改为:

const path = require('path');
module.exports = {
    mode:'development',
    context:path.resolve('./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可以是简单的字符串，比如：’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'
}

打包之后路径如下：