webpack 的 入口（Entry）、输出（Output）

入口（Entry）

入口定义了我们的应用代码开始执行的那个文件，webpack从这个文件开始打包。你能定义一个入口点（常见于单页应用 - Single-Page Application）， 或者多个入口点（常见于多页应用 - Multiple-Page Application）。

定义一个入口点就生成一个chunk。如果你只是用字符串的方式定义了一个入口点，其就被命名为main。如果你用对象的方式定义多个入口点，其就被命名为入口对象中的键值。下面两个例子是等价的：

entry: './src/index.js'

entry: {
    main: './src/index.js'
}

输出（Output）

输出对象配置webpack如何输出我们的打包（bundles）和资源（assets），以及将它们放到哪里。因为可能多于一个入口点，而只（能）指定一个输出配置。事实上我们就用chunks来给其一一命名。你能给打包输出的文件定义一个确定的名字，但既然我们想要分割我们的代码，就不能这么干。你得使用[name]来创建输出文件名的模板：

output: {
  filename: '[name].[chunkhash].bundle.js',
  path: path.resolve(__dirname, 'dist')
}

这里要注意的重要事情是 [chunkhash]: 它基于你文件的内容给每个chunk生成了一个特有的hash。它只有在你的文件内容本身变化的时候才变化。事实上，（如果内容没有变化）浏览器会缓存它。如果文件名改变了（译注：这里是指hash变化了，而hash是文件名的一部分，即意味着文件的内容变化了），浏览器就知道要重新下载了。chunkhash看起来长得就象这样子： 0c553ebfd158e16da428

如此这般，我们的main chunk就会被打包成名为 main.[chunkhash].bundle.js的文件。