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

前注：

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

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

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

3、入口（多入口）

示例目录

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

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

以上代码相当于：

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

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

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

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

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

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

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

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

如示例代码点击查看github。

核心代码如下：

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

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

Multiple assets emit to the same filename

        

          
        
        
        

          

          AI 代码解读
        
      
      

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

因此我们应当这样配置：

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

        

          
        
        
        

          

          AI 代码解读
        
      
      

这段代码的意思是：

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

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