webpack打包知識點總結
1.webpack 是一個模塊打包工具，能夠從一個需要處理的 JavaScript 文件開始，構建一個依賴關係圖（dependency graph），該圖映射到了項目中每個模塊，然後將這個依賴關係圖輸出到一個或者多個 bundle 中。
2.關鍵概念：
entry：項目入口
module：開發中每一個文件都可以看做 module，模塊不侷限於 js，也包含 css、圖片等
chunk：代碼塊，一個 chunk 可以由多個模塊組成
loader：模塊轉化器，模塊的處理器，對模塊進行轉換處理
plugin：擴展插件，插件可以處理 chunk，也可以對最後的打包結果進行處理，可以完成 loader 完不成的任務
bundle：最終打包完成的文件，一般就是和 chunk 一一對應的關係，bundle 就是對 chunk 進行便意壓縮打包等處理後的產出
3.Loader 解析順序是從右到左（從後到前）的
4.三大主流模塊規範
CommonJS、AMD 和 ES6 Module
①CommonJS：node.js、服務器、同步，使用require來導入一個模塊，module.exports導出模塊
// sayhi.js
var hi = 'hello world';
function sayHi() {
return hi;
}
module.exports = sayHi;
// index.js
var sayHi = require('./sayhi.js');
console.log(sayHi());
②AMD：瀏覽器、異步，使用require()：引入其他模塊；define()：定義新的模塊
// sayhi.js
define(function() {
var hi = 'hello world';
return function sayHi() {
return hi;
};
});
// index.js
require(['./sayhi.js'], function(sayHi) {
console.log(sayHi());
});
③ES6 Module，不僅僅在 Web 現代瀏覽器（例如 Chrome）上面得到實現，而且在 Node.js 9+ 版本也得到原生支持（需要加上--experimental-modules使用）
// sayhi.js
const hi = 'hello world';
export default function sayHi() {
return hi;
}
// index.js
import sayHi from './sayhi';
console.log(sayHi());
4.Webpack生成bundle的hash值有三種：
①hash：每次編譯 Compilation 對象的 hash，全局一致，跟單次編譯有關，跟單個文件無關，不推薦使用；
②chunkhash：chunk 的 hash，根據不同的 chunk 及其包含的模塊計算出來的 hash，chunk 中包含的任意模塊發生變化，則 chunkhash 發生變化，推薦使用；
③contenthash：CSS 文件特有的 hash 值，是根據 CSS 文件內容計算出來的，CSS 發生變化則其值發生變化，推薦 CSS 導出中使用。
5.在 Webpack 中，總共提供了三種方式來實現代碼拆分（Code Splitting）：
①entry 配置：通過多個 entry 文件來實現；
②動態加載（按需加載）：通過寫代碼時主動使用import()或者require.ensure來動態加載；
③抽取公共代碼：使用splitChunks配置來抽取公共代碼。