配置资源入口

Webpack通过context和entry这两个配置项来共同决定入口文件的路径。

context可以理解为资源入口的路径前缀，在配置时要求必须使用绝对路径的形式。

module.exports = {
  context: path.join(__dirname, './src/scripts'),
  entry: './index.js'
)；

配置context的主要目的是让entry的编写更加简洁，尤其是在多入口的情况下。 context可以省略，默认值为当前工程的根目录。

entry的配置可以有多种形式：字符串、数组、对象、 函数
1.字符串：

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js'
  },
  mode: 'development'
}

2.数组：
传入一个数组的作用是将多个资源预先合并，在打包时Webpack会将数组中的最后一个元素作为实际的入口路径

module.exports = {
  entry: ['babel-polyfill', './src/index.js']
}
等同于
import 'babel-polyfill'
module.exports = {
  entry: './src/index.js'
}

3.对象类型入口：
如果想要定义多入口，则必须使用对象的形式。对象的属性名(key)是chunk name,属性值(value)是入口路径

const path = require('path')
module.exports = {
  entry: {
    index: './src/index.js',
    lib: './src/lib.js'
  },
  output: {
    filename: '[name]@[hash].js',//输出文件的文件名。动态生成文件名
    path: path.join(__dirname, 'dist') //输出路径
  },
  mode: 'development',
  devServer: {
    port: '8081'
  }
}
filename配置项模板变量
[name]打包的文件名--打包后易于理解
[hash]此次打包所有资源生产的hash
[chunkhash]当前chunk内容的hash
两者与内容相关可以控制缓存，可以精确的控制客户端缓存得到更新---一般只应用于生产环境
[id]当前chunk的id
[query]指代filename配置项中的query

对象的属性值也可以为字符串或数组

module.exports = {
  entry: ['babel-polyfill', './src/index.js'],
  lib: './src/lib.js'
}

4.函数类型入口：

module.exports = {
  entry: () =>  './src/index.js' 
}

publicPath 指定资源的请求位置
指定由js或css请求的间接资源的请求位置
publicPath有3种形式：
1.HTML相关
publicPath：''
publicPath: './js'
2.Host相关
若publicPath的值以‘/’开始，则代表此时publicPath是以当前页面的host name为基础路径
publicPath: '/'
publicPath: '/dist/'
3.CDN相关（绝对路径）
域名与当前页面域名不一致，需要以绝对路径的形式进行指定。以协议头或相对协议的形式开始时，代表当前路径是CDN相关。
publicPath: 'http://cdn.com/'

webpack-dev-server的配置中也有一个publicPath,它不同于webpack中配置项的含义，指定webpack-dev-server的静态资源服务路径。

总结：
context：路径前缀 entry 入口文件 output 输出
第三方依赖较多时，可以提取vendor，将这些模块打包到一个单独的bundle，更有效的利用客户端缓存，加快页面渲染速度
path 资源的输出位置 publicPath 间接资源的请求位置