入口起点(entry points)

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。每个依赖项被处理后会输出到称之为 bundles 的文件中，可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。

单个入口配置

const config = {
  entry: './src/main.js'
};

// 或者

const config = {
  entry: {
    main: './src/main.js'
  }
};

多入口配置

const config = {
  entry: {
    main: './src/index.js',
    index2: './src/index2.js',
  }
};

多入口创建的依赖图是彼此完全分离，相互独立的（每个 bundle 中都有一个 webpack 引导(bootstrap)），页面间的共享代码不能被复用，导致打包出的 bundle  文件都非常大，此时需要 CommonsChunkPlugin 等插件做公共代码的抽取，这在后续篇章中会有介绍。

输出(output)

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

output.path

path 定义编译后 bundle 的输出目录，该值必须是一个绝对路径，如 'C:\dist' 或  '/dist'，项目中常会使用 node.js 的 path 模块配置目录的绝对地址。

output: {
  path: path.resolve(__dirname, 'dist')
},

path 路径中可以添加 [hash] 占位符，在参数中被替换为编译过程(compilation)的 hash

output.filename

filename 选项决定了每个输出 bundle 的名称，这些 bundle 将写入到 output.path 选项指定的目录下。

filename 默认是入口的名称，如果 entry 配置的是一个字符串值会默认使用 main 做为文件名，值得注意的是 filename 还是可以使用像 "js/[name]/bundle.js" 这样的文件夹结构。

webpack 内置了很多替换模板即占位符，通过这些占位符可以灵活的控制 bundle 的名称，下面一起来看看常用占位符的使用。

[hash]

官方定义：使用模块标识符(module identifier)的 hash 为文件名。需要注意的是这段描述并不是那么准确，这里的 hash 应该是每个compilation对应的哈希值，文件内容的变化都会导致 hash 的不同，以上是博主个人理解，如果不对请网友留言纠正。

[chunkhash]

使用 chunk 内容的 hash 作为文件名。chunk 是 webpack 打包进程中的一组模块，在不使用 CommonsChunkPlugin 等代码分离插件的时候 ，chunk 和 bundle 是一一对应的关系，在生产环境推荐使用该模式作为文件名。

[name]

使用 entry 入口名称作为文件名。入口没有配置时默认值是 main。

[id]

使用模块标识符(module identifier)为文件名，在webpack构建过程中，每个module.id 会基于默认的解析顺序(resolve order)进行增量。