webpack入口起点

港控/mmm° 2021-09-14 04:56 340阅读 0赞

入口起点:根上下文(contextual root) 或 app 第一个启动文件。entry 属性来定义入口

文件：webpack.config.js

# 一.语法 #

## 1.单个入口（简写）语法  ##

（1）.用法：

const config = { entry: './path/to/my/entry/file.js' }; module.exports = config;

entry 属性的单个入口语法，是下面的简写：

const config = { entry: { main: './path/to/my/entry/file.js' } };

（2）.场合使用：  
只有一个入口起点的应用程序或工具（即 library）」快速设置 webpack 配置的时候，这会是个很不错的选择。  
然而，使用此语法在扩展配置时有失灵活性。  
  
注意：  
向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时，传入数组的方式就很有用。

## 2.对象语法 ##

用法：

const config = { entry: { app: './src/app.js', vendors: './src/vendors.js' } };

对象语法会比较繁琐。然而，这是应用程序中定义入口的最可扩展的方式。

注意：“可扩展的 webpack 配置”是指，可重用并且可以与其他配置组合使用。这是一种流行的技术，用于将关注点(concern)从环境(environment)、构建目标(build target)、运行时(runtime)中分离。然后使用专门的工具（如 webpack-merge）将它们合并。

# 二.常见场景 #

## 1.分离 应用程序(app) 和 第三方库(vendor) 入口 ##

const config = { entry: { app: './src/app.js', vendors: './src/vendors.js' } };

从 app.js 和 vendors.js 开始创建依赖图(dependency graph)。这些依赖图是彼此完全分离、互相独立的（每个 bundle 中都有一个 webpack 引导(bootstrap)）。这种方式比较常见于，只有一个入口起点（不包括 vendor）的单页应用程序(single page application)中。

## 2.多页面应用程序 ##

const config = { entry: { pageOne: './src/pageOne/index.js', pageTwo: './src/pageTwo/index.js', pageThree: './src/pageThree/index.js' } };

webpack 需要 3 个独立分离的依赖图。在多页应用中，（译注：每当页面跳转时）服务器将为你获取一个新的 HTML 文档。页面重新加载新文档，并且资源被重新下载。

# 三.“entry”——字符串VS数组VS对象 #

entry告诉Webpack入口文件或者起点在哪里。它可以是一个字符串，一个数组或者一个对象。这可能会使你感到困惑，但不同的类型适用于不同的场合。  
      如果你使用的是单个起点（大部分项目都是如此），那么你可以使用任意的类型，它们的结果都会是一样的。

![20170908114816875][]

## 1.entry——数组 ##

但是，如果你想要添加互不依赖的多个文件，你可以使用数组的格式。  
举个栗子，你的HTML可能需要“googleAnalytics.js”。你可以告诉Webpack在bundle.js的后面把它添加进去：

![20170908114908035][]

## 2.entry——对象 ##

现在，当你有一个包含多个HTML文件的多页应用，而不是单页应用的项目的时候（index.html和profile.html），你可以通过对象格式告诉Webpack去一次性生成多个bundle文件。  
  
下面的配置会生成两个JS文件：indexEntry.js和profileEntry.js，你可以在index.html和profile.html分别使用它们：

![20170908114930849][]  
  
  
使用方法：

//profile.html <script src=”dist/profileEntry.js”></script> //index.html <script src=”dist/indexEntry.js”></script>

注意：文件名来自“entry”对象的key。

## 3.entry——组合格式 ##

你也可以在entry对象中使用数组。下面的例子会生成三个文件：一个包含三个文件的vendor.js，一个index.js和一个profile.js。

![20170908131628510][]

[20170908114816875]: /images/20210813/063683f4f1da4014bfd6518d1abde0e0.png
[20170908114908035]: /images/20210813/76703f5fe4384961a44ad6d566afb782.png
[20170908114930849]: /images/20210813/17def1af92da4732b24debbb48a0f136.png
[20170908131628510]: /images/20210813/748ba02c965a42dc931be28991e61d5d.png