【webpack学习记录2】入口起点、输出、模式这两段有点抽象，大概意思是如果想将多个依赖输出到同一个输出文件的时候可以

入口起点（entry points）

单入口（简写）语法

用法：entry: string|Array<string>

单个入口写法：

// 简写
module.exports = {
  entry: './src/main.js'
}

// 普通写法
module.exports = {
  entry: {
    main: './src/main.js'
  }
}

当你向 entry 传入一个数组时会发生什么？向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入，并且将它们的依赖导向(graph)到一个“chunk”时，传入数组的方式就很有用。

当你正在寻找为「只有一个入口起点的应用程序或工具（即 library）」快速设置 webpack 配置的时候，这会是个很不错的选择。然而，使用此语法在扩展配置时有失灵活性。

这两段有点抽象，大概意思是如果想将多个依赖输出到同一个输出文件的时候可以将entry写成一个数组的形式，但是优点也是缺点，这个写法应该是只适合快速设置，如果想扩展配置的话就不太灵活（不知道说的对不对？）。

对象语法

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

module.exports = {
  entry: {
    main: './src/main.js',
    normal: './src/normal.js'
  }
};

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

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

这个更抽象，有点不理解，先放着。

常见场景

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

module.exports = {
  entry: {
    main: './src/main.js',
    vendors: './src/vendors.js'
  }
};

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

多页面应用程序

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

我们告诉 webpack 需要 3 个独立分离的依赖图（如上面的示例）。

在多页应用中，（译注：每当页面跳转时）服务器将为你获取一个新的 HTML 文档。页面重新加载新文档，并且资源被重新下载。然而，这给了我们特殊的机会去做很多事：

使用 CommonsChunkPlugin 为每个页面间的应用程序共享代码创建 bundle。由于入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益。

根据经验：每个 HTML 文档只使用一个入口起点。

输出（output）

配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置。

用法

在 webpack 中配置 output 属性的最低要求是，将它的值设置为一个对象，包括以下两点：

filename 用于命名输出的文件
path 用于指定输出目录的绝对路径

module.exports = {
  filename: 'custom.js',
  path: '/custrompath/dist'
}

多个入口起点

如果配置创建了多个单独的 "chunk"（例如，使用多个入口起点或使用像 CommonsChunkPlugin 这样的插件），则应该使用占位符(substitutions)来确保每个文件具有唯一的名称。

module.exports = {
  entry: {
    page1: './src/page1.js',
    page2: './src/page2.js'
  },
  output: {
    filename: [name].js,
    path: __dirname + '/dist'
  }
}

模式（mode）

提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。

用法

// 配置文件
module.exports = {
  mode: 'production'
};
// cli参数
webpack --mode = development

总结

入口可配置单入口应用也可以使用对象语法配置多入口，比较重要的一个功能就是分离应用程序和第三方库。
出口定义输出文件名和路径，如果是多入口则需要占位符确保名称唯一
模式可在配置文件或cli命令设置

【webpack学习记录2】入口起点、输出、模式