手把手教你webpack3（3）入口（多入口）entry

前注：

文档全文请查看根目录的文档说明。

如果可以，请给本项目加【Star】和【Fork】持续关注。

有疑义请点击这里，发【Issues】。

3、入口（多入口）

示例目录

在上面的webpack.config.js中，有如下代码：

// 入口文件，指向app.js
entry: './app.js',

以上代码相当于：

entry: {main: './app.js'
}

如果是普通的项目（单入口），那么按照上面的方式写（entry: './app.js'）就可以了。

至于下面的方式是什么呢？答案是：用于提供【多入口】的解决方案。

假如我一个项目里，允许有A、B两个html文件，他们之间是不同的入口文件（比如一个是用户入口页，一个是管理入口页）。

显然虽然是两个不同的入口，但是他们之间有很多共通的逻辑（否则就有大量重复开发工作了），因此我们需要将其写在同一个工程中，然后通过不同的入口文件引入他。

他的依赖树可能是这样的：

.
|____first.html
| |____first.js
| | |____common.js
|____second.html
| |____second.js
| | |____common.js

也就是说，first.js和second.js两个文件，都共享一个common.js模块。

如示例代码点击查看github。

核心代码如下：

// webpack.config.js
...
entry: {first: './first_entry.js',second: './second_entry.js'
},
...

当然，只配置入口，是无法正常运行的，会报错：

Multiple assets emit to the same filename

意思就是，你把多入口文件打包到一个文件里了，这样是不对的。

因此我们应当这样配置：

output: {// 文件名，将打包好的导出为bundle.jsfilename: './dist/[name].js'
}

这段代码的意思是：

将多入口文件，打包到dist文件夹下；
并且名字根据入口文件决定；
[name]表示文件名自动匹配入口文件的key（即first: './first_entry.js'里面的first）；

fork本项目，并且在本文件夹下执行npm run test来打包，然后打开first.html和second.html来查看效果（见控制台console）

手把手教你webpack3（3）入口（多入口）entry相关推荐

手把手教你webpack3（14）HMR模块热加载
前注: 文档全文请查看根目录的文档说明. 如果可以,请给本项目加[Star]和[Fork]持续关注. 有疑义请点击这里,发[Issues]. 点击这里查看DEMO 7.模块热加载 HMR 7.0.使 ...
手把手教你webpack3（15）插件之雪碧图插件（WEBPACK-SPRITESMITH配置简述）
WEBPACK-SPRITESMITH配置简述前注: 文档全文请查看根目录的文档说明. 如果可以,请给本项目加[Star]和[Fork]持续关注. 有疑义请点击这里,发[Issues]. DEMO ...
手把手教你写电商爬虫-第二课实战尚妆网分页商品采集爬虫
系列教程手把手教你写电商爬虫-第一课找个软柿子捏捏如果没有看过第一课的朋友,请先移步第一课,第一课讲了一些基础性的东西,通过软柿子"切糕王子"这个电商网站好好的练了一次手,相 ...
手把手教你36小时搭建无人超市系统 !（附代码）
来源:QbitAI 编译:夏乙问耕本文经AI新媒体量子位(公众号ID:qbitai )授权转载,转载请联系出处本文共1635字,建议阅读5分钟. 本文手把手教大家用代码工具搭建亚马逊无人商店. ...
linux 模块化编译,手把手教Linux驱动1-模块化编程 module
大家好,从本篇起,一口君将手把手教大家如何来学习Linux驱动,预计会有20篇关于驱动初级部分知识点.本专题会一直更新,有任何疑问,可以留言或者加我微信. Linux的开发者,遍布世界各地,他们相互之 ...
手把手教你做关键词匹配项目（搜索引擎）---- 第二十一天
客串:屌丝的坑人表单神器.数据库那点事儿面向对象升华:面向对象的认识----新生的初识.面向对象的番外----思想的梦游篇(1).面向对象的认识---如何找出类负载均衡:负载均衡----概念认识篇 ...
手把手教你玩转SOCKET模型：完成端口(Completion Port)详解
这篇文档我非常详细并且图文并茂的介绍了关于网络编程模型中完成端口的方方面面的信息,从API的用法到使用的步骤,从完成端口的实现机理到实际使用的注意事项,都有所涉及,并且为了让朋友们更直观的体会完成端口 ...
linux wait函数头文件_手把手教Linux驱动9-等待队列waitq
在上一篇<手把手教Linux驱动8-Linux IO模型>我们已经了解了阻塞.非阻塞.同步和异步等相关概念,本文主要讲解如何通过等待队列实现对进程的阻塞. 应用场景: 当进程要获取某些资源 ...
手把手教你用express搭建个人博客（二）
转自http://www.zhentaoo.com/program/one?id=58a32067aa82ab69510c26be 上篇说到了如何使用express生成器快速生成一个node项目,如果 ...

手把手教你webpack3（3）入口（多入口）entry

前注：

3、入口（多入口）

手把手教你webpack3（3）入口（多入口）entry相关推荐

最新文章

热门文章