Webpack — 配置（entry&output）

入口 [entry]

entry是整个 webpack 项目打包的入口。

• string 字符串，表明该项目只有一个入口文件；

module.exports = {
  // ...
  entry: "./src/index.js"
};

• array 数组，表明想将多个平行的、互相不依赖的模块打包在一起；

module.exports = {
  // ...
  entry: ["./entry1.js", "/entry2.js"]
};

• object 对象，key为 chunk name，value为入口文件地址，value和上述相同，既可以是string也可以是array；

module.exports = {
  // ...
  entry: {
    page1: "./page1.js",
    page2: ["./entry1.js", "/entry2.js"]
  }
};

输出[output]

output 位于配置的最外层，包括了一组选项，指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」。

module.exports = {
  // ...
  output: {
    filename: "bundle.js",
    path: "./dist"
  }
};

output中最常见的两个属性为filename 和 path，在定义filename时不必定义文件的位置，因为会在path 中定义。
filename的形式可以是一个写死的字符串，那么无论有几个入口都将最终打包为一个bundle.js文件；当我们有多个入口文件并创建的chunk是多余一个时，我们可以再filename中使用占位符：
[name].js —— chunk 名称；
[hash].js —— 打包的hash值；
[chunkhash].js —— 每一个chunk 的hash值；

module.exports = {
  // ...
  output: {
    filename: "[name].js",
    // filename: "[hash].js",
    // filename: "[chunkhash].js",
    // 占位符可以任意组合
    // filename: "[name]-[hash].js"   
    path: "./dist"
  }
};