（五）資源輸入和輸出

1. entry 、chunk 、bundle

entry： 入口文件，wepack 打包的根目錄

chunk：chunk的字面意思是代碼塊，它就像一個裝着許多文件的文件袋，裏面的各個文件就是模塊。chunk是webpack在外面假的一層包裹，根據配置不同，可生成一個或者多個chunk

bundle: chunk 得到的打包產物

三者之間的關係

2. 配置資源入口

配置資源入口時只做了兩件事：

1. 定義 entry 入口文件 

2: 定義chunk name，如果只有一個默認爲 main.js，如果項目有多個入口，則需要定每一個的chunk name

entry 的配置可以有多種形式：字符串、數組、對象、函數

字符串（一個入口適用）

entry: './src/index.js'

對象：（多入口適用）

entry: {
  // chunk name 爲index
  index: './src/index.js',
  // chunk name 爲lib
  lib: './src/lib.js'
}

3. 配置資源入口----提取vendor

vendor的意思是供應商，webpack中的vendor是指工程中所用到的第三方庫、第三方框架等等打包集中產生的bundle

entry: {
  index: './src/index.js',
  vendor: ['vue', 'react', 'react-dom']
}

這樣時候 index 包含的 bundle 只是包含業務模塊

4. 配置資源出口

output 是一個對象，裏面包含各種配置項，幾種常用的如下

（1）filename: 出口名稱

output: {
  filename: 'bundle.js'
},

filename 也可以寫成相對路徑，如果有就輸出在該文件。如果沒有該目錄，則創建該文件並輸出

output: {
    filename: './bundle.js'
  },

重點：動態生成文件名

 entry: {
    app: './src/app.js',
    vender: './src/vender.js'
  },
  output: {
    filename: '[name].js'
  },

filename的 [name] 會自動取chunk name，生成 app.js 和 vender.js

如果 打包後的大小超過 250KB , 就會 提示 [big]，現在是 [emitted]

重點：生產環境版本號 chunkhash

加上版本號有利於控制客戶端緩存，每次加載新的文件，不會加載之前的緩存

entry: {
    app: './src/app.js',
    vender: './src/vender.js'
  },
  output: {
    filename: '[name].[chunkhash].js'
  },

本例子採用.拼接

entry: {
    app: './src/app.js',
    vender: './src/vender.js'
  },
  output: {
    filename: '[name].[chunkhash].js'
  },

（2）path：輸出文件的絕對路徑，bundle 的輸出位置

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

輸出文件在工程的 dist 目錄，默認都是 dist 目錄，所以不寫也可以

（3）pubicPath: 資源的請求位置，是一個非常重要的配置項

資源請求位置：由js、css所請求的間接資源路徑，入js異步加載的js，css請求的圖片字體等