Entry

entry 是配置模块的入口，如果我们定义了配置文件但却没有配置 entry 的话将无法正常启动。

现在，让我们来学习一下怎么配置它吧。

Entry 的类型

entry 有多种类型，常见的类型有三种：String、Array、Object

String

module.exports = {
  entry: './src/index.js',
}

这样写代表入口只有一个，是 src 目录下的 index.js，运行过程中生成一个默认为 main 的 chunk，生成一个打包后的文件。

Array

module.exports = {
  entry: ['./src/main.js', './src/index.js'],
}

这样写的话 webpack 会以数组中两个文件为入口，把数组中每个元素指定的模块都加载出来进行依赖整合，但运行过程中只生成一个 chunk，且也只生产一个打包后的文件。

Object

module.exports = {
  entry: {
    main: './src/main.js',
    index: './src/other.js'
  },
}

这样写代表有两个入口，会分别生成名为 main 和 index 的 chunk，最终也会生成两个打包后的文件。

以 Object 的形式书写 entry 多用于多页面应用打包，由于我们更多的是写 SPA（单页面应用），因此会比较少用到这种写法。

动态 Entry

多用于动态增长的入口页面，以及从服务端获取入口文件等。

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

module.exports = {
  entry: () => new Promise(resolve => {
    resolve({
        main: './src/main.js',
        index: './src/other.js'
    })
  })
}

需要注意的是，动态 Entry 的触发周期不同，具体体现是在每次 make 事件中被调用。

make 事件在 webpack 启动和每当监听文件变化时都会触发。

context

Webpack 在寻找相对路径的文件时会以 context 为根目录，context 默认为执行启动 Webpack 时所在的当前工作目录。

如果想改变 context 的默认配置，需要在配置文件中声明

module.exports = {
  context: path.resolve(__dirname, 'app')
}

Output

output 是一个对象(object)，用于告知 webpack 如何输出最终的代码。

filename

一种比较常规的写法就是以字符串的方式配置：

module.exports = {
  output: {
    filename: 'bundle.js'
  }
}

这么做会只输出一个名为 bundle.js 的文件，如果我们有多个 chunk 需要输出，换句话说我们的 entry 定义了多个入口，这时候就需要借助模板和变量了。

webpack 会为每个 chunk 取名，可以根据这个来区分输出的文件：

module.exports = {
  output: {
    filename: '[name].js'
  }
}

代码里的 [name] 代表着用内置的 name 变量去替换 [name]，即每个要输出的 chunk 都会把自己的 name 带入到 [name] 当中。

内置变量除了 name 之外还有：

变量名	含义
id	chunk 的唯一标识，从0开始
name	chunk 的名称
hash	chunk 的唯一 hash 标识
chunkhash	chunk 内容的 hash 值

其中 hash 和 chunkhash 的长度可以指定，比如 [hash:8] 代表取8位 hash 值，默认是20位。

path

path 配置输出文件存放在本地的目录，必须是 string 类型的绝对路径。通常通过 Node.js 的 path 模块去获取绝对路径：

module.exports = {
  output: {
    path: path.resolve(__dirname, './dist')
  }
}

publicPath

有些资源需要按需加载或是加载外部的资源，通俗来讲就是异步加载资源的时候，我们就需要配置 publicPath。

比如我们要将构建出的资源文件上传到 CDN 服务上，只需给 publicPath 定义我们 CDN 的路径即可：

module.exports = {
  output: {
    filename:'[name].js'
    publicPath: 'https://cdn.xxx.com/assets/'
  }
}

Webpack 基础之 Entry 和 Output