webpack系列教程之entry

来瓶二锅头00
171 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。

上一篇我们通过webpack创建了一个简单的demo。这一篇我们将详细的讲解下入口（entry）

前言

我们前面说到了，webpack是通过入口，然后递归获取依赖生成依赖图，然后再进行打包，详见webpack初体验（一）。这里的入口说的就是entry.

语法

entry的语法为

interface Entry {
 entry:string|Array<string>|{
    [keyName:string]:string|Array<string>
}                      
}
entry: Entry.entry|Function:()=>ntry.entry

从上面的ts配置我们就能看出来，其实入口有两种方式，一种是单个入口，一种是多个入口。同时也支持动态函数。下面我们一一来看

单入口

单个入口，顾名思义是一个模块只有一个入口，他对应的语法是entyy:string|{[keyName:string:string]} 例如：

module.export = {
    entry:{
        index:'./src/index.js'
    }
}

或者是

module.export = {
    entry:'./src/index.js'
}

我们其实可以看出来，下面一种写法是上面一种写法的简写哦。如果我们没有额外的处理，且只有一个入口的时候我们可以直接通过简写，但是在以下常见中我们只能通过对象的方式去创建入库

分离第三方库入口

在日常开发中我们常常会用到一些第三方库，如果我们全部放入到一个入口，会将第三方库也打包到一个js中，最终会导致主应用的js体积较大。这样整个应用的性能会较差，因此我们一般会将第三方库单独提取到一个或者多个库中，例如：

module.export = {
    entry:{
        main:'./src/index.js',
        vendors:'./src/jquery.js'
    }
}

上面的配置会在打包的时候分别从index.js以及jquery.js开始递归创建依赖图。这两个入口创建的依赖图是完全分离且互相独立的。在底层进行处理的时候。webpack会通过CommmonChunkPlugin从应用程序中提取wendors的引用到最终的包中，同时将主应用程序中引用vendors的部分替换成_webpack_require().这样就不会打包主应用的时候重复打包vendors了

多页面应用

当前我们常见的是单页面应用，但是有的时候我们也有多页面应用需求，这个时候就需要用到对象方式了，例如

module.export = {
    entry:{
        indexOne:'./src/index.js',
        indexTwo:'./src/indexTwo.js
    }
}

上面的配置，会让webpack构建两个独立分离的依赖图。当多页面跳转的时候，会根据新的html文档，自动重新加载所需要的模块。也就是说每一个HTML页面都有一个入口起点。

多入口

上面我们说完了单入口，现在如果我们采用传入一个数组会怎么样呢？例如

module.export = {
    entry:['./src/index.js','./src/indexTwo.js']
}

这个时候webpack根据index.js以及indexTwo.js分别构建依赖图，然后将两者的依赖图指定给同一个chunk。最终只会生成一个bundle

动态入口

在有的时候我们可能需要执行一些判断然后动态的去返回所需要的入口，这个时候就需要通过动态入口了，例如

module.export = {
    entry:()=> new Promise((resolve)=>resolve(['./demo1','./demo2']))
}

至此关于entry的详细说明结束了，下一章我们将去探索output

avatar
文章
阅读
粉丝