手把手教你webpack3(3)入口(多入口)entry-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

手把手教你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.jssecond.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.js
    filename: './dist/[name].js'
}

这段代码的意思是:

  1. 将多入口文件,打包到dist文件夹下;
  2. 并且名字根据入口文件决定;
  3. [name]表示文件名自动匹配入口文件的key(即first: './first_entry.js'里面的first);

fork本项目,并且在本文件夹下执行npm run test来打包,然后打开first.htmlsecond.html来查看效果(见控制台console)

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: