通常我們的項目包含三種類型的代碼：業務代碼、第三方依賴庫、webpack打包構建後的manifest。官網經常會看到mainfest這個詞，但是它究竟指什麼，我們來做個實驗找答案吧：（ps：文章把manifest打成mainfest了）
1 mkdir webpack_mainfest //在當前目錄下，創建項目目錄 webpack_mainfest
2 npm init
3 npm install webpack
2 cd webpack_mainfest // 進入項目目錄
3 touch main.js // 創建入口文件
5 touch wepack.config.js //創建webpack 配置文件
webpack.config.js
const path = require('path');
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
}
main.js
console.info('入口文件也是一個模塊')
然後，我們就直接打包： webpack --config webpack.config.js
可以看出，打包是隻是引入一個模塊
我們看一下打包之後生成bundle.js的內容：
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) {
/******/ return installedModules[moduleId].exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
console.info('入口文件也是一個模塊')
/***/ })
/******/ ]);
我們只是引入一個main.js模塊，但是實際生成的bundle.js確實非常多。
前面的一大堆就是mainfest，準確來說是，runtime代碼。官網的描述是這樣的：
其實這裏，webpack幫我們定義了一個webpack_require的加載模塊的方法，而mainfest模塊數據集合就是對應着bundle.js第三行的 installedModules 。每當我們在main.js入口文件引入一模塊，installModules就會發生變化，當我們頁面點擊跳轉，加載對應模塊就是通過__webpack_require__方法在installModules中找對應模塊信息，進行加載。
那這個跟緩存有什麼關係呢？
1、我們知道瀏覽器加載js文件，如果文件名是一致的會優先從本地緩存拿，如果沒有才向服務器這邊請求。這個是時候，我們可以知道，如果是業務代碼，比如我優化了一個功能，更改了個bug，如果文件名沒有變化，請求時，瀏覽器用了緩存數據，則我們的新代碼沒被用上，因爲瀏覽器用了舊代碼文件。所以，output的選項中的filename，就不在是bundle.js ,而對應着bungdle[chunkhash].js，因爲每次打包時，chunkhash都不同，所以打出來的文件名居不同，瀏覽器就不會直接用緩存數據了，而是請求新文件
2、實際上，我們發現只有我們業務代碼經常變化，而第三方依賴庫是很少變化的，比如你使用了vue、vue-router、或者react等第三方庫，這些是不會變化，那我們希望瀏覽器如果有的話，就不用再請求。但是，我們打包都整合到一個bundle[chunkhash].js上了，所以，我們需要藉助webpack.optimize.CommonsChunkPlugin來幫我們分離代碼，將mainfest、第三方庫包，業務代碼獨立成三個文件
// 抽出第三方庫，命名vendor，不需要加chunkhash，因爲他很少變化
// minChunk 判斷哪些模塊可以抽出來合併成ventor，這裏只要是從node_module出來就抽
// 注意一定要放在mainfest的前面
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// 抽出mainfest
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
})
而我們的業務代碼是配置在output選項的，這樣就會生成bundle[chunkhash].js 、vendor.js、mainfest.js,三個文件。
我們來試一下：
npm install vue //第三方庫
// 同時main.js，改成
console.info('入口文件也是一個模塊')
var vue = require('vue')
然後webpack.config.js 按上面加入兩個插件
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './main.js',
output: {
filename: 'bundle[chunkhash].js',
path: path.resolve(__dirname, 'dist')
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js',
}
},
plugins: [
// 抽出第三方庫，命名vendor，不需要加chunkhash，因爲他很少變化
// minChunk 判斷哪些模塊可以抽出來合併成ventor，這裏只要是從node_module出來就抽
// 注意一定要放在mainfest的前面
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
filename: "vendor.js",
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '/node_modules')
) === 0
)
}
}),
// 抽出mainfest
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
filename: 'manifest.js'
})
]
}
執行 webpack --config webpack.congfig.js, 生成三個對應文件。這樣來說，ventor一樣的，然後瀏覽如果是第二次請求，會走緩存路線，不必再次加載。而bundle[chunkhash].js也就是我們的業務代碼，可以避免緩存的影響
實際上，mainfest也會發生變化，它的變化在於你是否增加了模塊，比如新引入一個js文件之類，mainfest也會變化。明白了mainfest，我們就可以更好的處理我們的緩存機制了
作者：下一站深圳
鏈接：https://www.jianshu.com/p/95752b101582
來源：簡書
著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。