Webpack基础教程之名词解释(2)

二、入口起点(Entry Points)

webpack的 entry 属性不仅可以配置单个入口，还可以配置多个入口：

1、单个入口(简写)配置

用法：entry: string|Array<string>

简单使用 ：

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

entry 属性的单个入口配置方式：

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

若向 entry 传入 [文件路径(file path)数组]，将创建 多个主入口，常常用在需要同时注入多个文件，并将它们的依赖导向(graph)到一个chunk时。

2、多个入口(简写)配置

对象语法

用法：entry: {[entryChunkName: string]: string|Array<string>}

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

虽然语法繁琐，但这是应用程序中定义入口的最可扩展的方式。

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

常见场景

列出一些常见的入口配置和实际案例：

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

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

webpack 从 app.js 和 vendors.js 开始构建，并且他们是完全分离互相独立，为了支持提供更佳 vendor 分离能力的 DllPlugin，考虑移除该场景。

(2)多页面应用程序

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

这样告诉 webpack 需要 3 个独立分离的依赖图，

使用 CommonsChunkPlugin 为每个页面间的应用程序共享代码创建 bundle。

由于入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益。

更多关于Webpack基础教程请点击下面的相关文章