一、Webpack核心配置——入口(entry)

xiaoxiao2021-02-28  42

入口是Webpack打包的起始文件,会顺着起始文件逐步构建依赖。

基本的形式是字符串,单入口,如

字符串形式:

entry: path.resolve(__dirname,'../src/main.js')

等价于对象形式的main:

entry: { main: path.resolve(__dirname,'../src/main.js') }

entry除此之外还有复杂的数组

entry有四种形式(字符串、数组、对象、方法)

一、字符串
//绝对路径或者相对路径 entry: './main.js';

注意,相对路径是相对于执行webpack命令行时的路径。

推荐使用path模块

entry: path.resolve(__dirname,'./main.js')

如果用字符串格式,这对应output时的[name]为'main'。(并非跟主文件同名

二、数组
//多页面应用对应多个入口。 entry: ['./main.js', 'header.js'];

数组格式,output里的[name]也是'main'

三、对象
//对应多入口 entry: { 'a' : './main.js', 'b' : './header.js' //... }

对象格式,键值对(key-value)里面的key是每个chunk的[name]

key的命名,还可以用路径,如'path/to/xxx'(是斜杠/),则chunk的[name]为xxx,相对于导出路径为path->to->xxx.js

value,必须符合node中require的参数字符串格式,如'./main.js'对应require('./main.js');安装模块或者自定义模块,如'loadsh'

四、方法
//返回上面三种任一格式都可以 entry: () => './main.js'

官网的API中,表示还可以返回一个promise对象

// entry: () => new Promise((resolve)=>resolve(['./main.js','./header.js']))resolve的参数,是上面的三种任一格式都可以(未亲自测试过)
转载请注明原文地址: https://www.6miu.com/read-2632654.html

最新回复(0)