探索webpack模塊及webpack3新特性
更新時間：2017年09月18日 16:14:05 作者：小深刻的松鼠
webpack是一個強大的模塊打包工具，在處理依賴、模塊上都很優(yōu)秀，本文從bundle.js文件分析出發(fā)去探索了不同模塊方案的加載機制，初步去理解webpack，并且對webpack3特性進行闡述
本文從簡單的例子入手，從打包文件去分析以下三個問題：webpack打包文件是怎樣的？如何做到兼容各大模塊化方案的？webpack3帶來的新特性又是什么？
一個簡單的例子
webpack配置
// webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
};
簡單的js文件
// src/index.js
console.log('hello world');
webpack打包后的代碼
一看你就會想，我就一行代碼，你給我打包那么多？？？（黑人問號）
// dist/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.log('hello world');
/***/ })
/******/ ]);
我們來分析一下這部分代碼，先精簡一下，其實整體就是一個自執(zhí)行函數，然后傳入一個模塊數組
(function(modules) {
//...
})([function(module, exports) {
//..
}])
好了，傳入模塊數組做了什么(其實注釋都很明顯了，我只是大概翻譯一下）
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache 緩存已經load過的模塊
/******/ 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, //模塊id
/******/ l: false, // 是否已經加載完畢
/******/ exports: {} // 對外暴露的內容
/******/ };
/******/
/******/ // Execute the module function 傳入模塊參數，并執(zhí)行模塊
/******/ 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 為ES6 exports定義getter
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) { // 假如exports本身不含有name這個屬性
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules 解決ES module和Common js module的沖突，ES則返回module['default']
/******/ __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配置下的公共路徑
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports 最后執(zhí)行entry模塊并且返回它的暴露內容
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
console.log('hello world');
/***/ })
/******/ ]);
整體流程是怎樣的呢
- 傳入module數組
- 調用
__webpack_require__(__webpack_require__.s = 0)
構造module對象，放入緩存
調用module,傳入相應參數modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); （這里exports會被函數內部的東西修改）
標記module對象已經加載完畢
返回模塊暴露的內容（注意到上面函數傳入了module.exports,可以對引用進行修改）
- 模塊函數中傳入
module, module.exports, __webpack_require__ - 執(zhí)行過程中通過對上面三者的引用修改，完成變量暴露和引用
webpack模塊機制是怎樣的
我們可以去官網看下webpack模塊
doc.webpack-china.org/concepts/mo…
webpack 模塊能夠以各種方式表達它們的依賴關系，幾個例子如下：
- ES2015 import 語句
- CommonJS require() 語句
- AMD define 和 require 語句
- css/sass/less 文件中的 @import 語句。
- 樣式(url(...))或 HTML 文件()中的圖片鏈接(image url)
強大的webpack模塊可以兼容各種模塊化方案，并且無侵入性(non-opinionated)
我們可以再編寫例子一探究竟
CommonJS
修改src/index.js
var cj = require('./cj.js');
console.log('hello world');
cj();
新增src/cj.js，保持前面例子其他不變
// src/cj.js
function a() {
console.log("CommonJS");
}
module.exports = a;
再次運行webpack
/******/ (function(modules) { // webpackBootstrap
//... 省略代碼
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
let cj = __webpack_require__(1);
console.log('hello world');
cj();
/***/ }),
/* 1 */
/***/ (function(module, exports) {
function a() {
console.log("CommonJS");
}
module.exports = a;
/***/ })
/******/ ]);
我們可以看到模塊數組多了個引入的文件，然后index.js模塊函數多了個參數__webpack_require__，去引用文件（__webpack_require__在上一節(jié)有介紹），整體上就是依賴的模塊修改了module.exports，然后主模塊執(zhí)行依賴模塊，獲取exports即可
ES2015 import
新增src/es.js
// src/es.js
export default function b() {
console.log('ES Modules');
}
修改src/index.js
// src/index.js
import es from './es.js';
console.log('hello world');
es();
webpack.config.js不變，執(zhí)行webpack
/******/ (function(modules) { // webpackBootstrap
// ... 省略代碼
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__es_js__ = __webpack_require__(1);
console.log('hello world');
Object(__WEBPACK_IMPORTED_MODULE_0__es_js__["a" /* default */])();
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (immutable) */ __webpack_exports__["a"] = b;
function b() {
console.log('ES Modules');
}
/***/ })
/******/ ]);
我們可以看到它們都變成了嚴格模式，webpack自動采用的
表現其實跟CommonJS相似，也是傳入export然后修改，在主模塊再require進來，
我們可以看到這個
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
這個干嘛用的？其實就是標記當前的exports是es模塊，還記得之前的__webpack_require__.n嗎，我們再拿出來看看
/******/ // getDefaultExport function for compatibility with non-harmony modules 解決ES module和Common js module的沖突，ES則返回module['default']
/******/ __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;
/******/ };
為了避免跟非ES Modules沖突？沖突在哪里呢？
其實這部分如果你看到babel轉換ES Modules源碼就知道了，為了兼容模塊，會把ES Modules直接掛在exports.default上，然后加上__esModule屬性，引入的時候判斷一次是否是轉換模塊，是則引入module['default']，不是則引入module
我們再多引入幾個ES Modules看看效果
// src/es.js
export function es() {
console.log('ES Modules');
}
export function esTwo() {
console.log('ES Modules Two');
}
export function esThree() {
console.log('ES Modules Three');
}
export function esFour() {
console.log('ES Modules Four');
}
我們多引入esTwo和esFour，但是不使用esFour
// src/index.js
import { es, esTwo, esFour} from './es.js';
console.log('hello world');
es();
esTwo();
得出
/******/ (function(modules) { // webpackBootstrap
// ...
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__es_js__ = __webpack_require__(1);
console.log('hello world');
Object(__WEBPACK_IMPORTED_MODULE_0__es_js__["a" /* es */])();
Object(__WEBPACK_IMPORTED_MODULE_0__es_js__["b" /* esTwo */])();
/***/ }),
/* 1 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
/* harmony export (immutable) */ __webpack_exports__["a"] = es;
/* harmony export (immutable) */ __webpack_exports__["b"] = esTwo;
/* unused harmony export esThree */
/* unused harmony export esFour */
function es() {
console.log('ES Modules');
}
function esTwo() {
console.log('ES Modules Two');
}
function esThree() {
console.log('ES Modules Three');
}
function esFour() {
console.log('ES Modules Four');
}
/***/ })
/******/ ]);
嗯嗯其實跟前面是一樣的，舉出這個例子重點在哪里呢，有沒有注意到注釋中
/* unused harmony export esThree */ /* unused harmony export esFour */
esThree是我們沒有引入的模塊，esFour是我們引用但是沒有使用的模塊，webpack均對它們做了unused的標記，其實這個如果你使用了webpack插件uglify，通過標記，就會把esThree和esFour這兩個未使用的代碼消除（其實它就是tree-shaking)
AMD
我們再來看看webpack怎么支持AMD
新增src/amd.js
// src/amd.js
define([
],function(){
return {
amd:function(){
console.log('AMD');
}
};
});
修改index.js
// src/index.js
define([
'./amd.js'
],function(amdModule){
amdModule.amd();
});
得到
/******/ (function(modules) { // webpackBootstrap
// ... 省略代碼
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [
__webpack_require__(1)
], __WEBPACK_AMD_DEFINE_RESULT__ = function(amdModule){
amdModule.amd();
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ }),
/* 1 */
/***/ (function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;!(__WEBPACK_AMD_DEFINE_ARRAY__ = [
], __WEBPACK_AMD_DEFINE_RESULT__ = function(){
return {
amd:function(){
console.log('AMD');
}
};
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
/***/ })
/******/ ]);
先看amd.js整理一下代碼
function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__,
__WEBPACK_AMD_DEFINE_RESULT__;
!(
__WEBPACK_AMD_DEFINE_ARRAY__ = [],
__WEBPACK_AMD_DEFINE_RESULT__ = function() {
return {
amd: function() {
console.log('AMD');
}
};
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined &&
(module.exports = __WEBPACK_AMD_DEFINE_RESULT__)
);
})
簡單來講收集define Array然后置入返回函數，根據參數獲取依賴
apply對數組拆解成一個一個參數
再看index.js模塊部分
function(module, exports, __webpack_require__) {
var __WEBPACK_AMD_DEFINE_ARRAY__,
__WEBPACK_AMD_DEFINE_RESULT__;
!(
__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(1)],
__WEBPACK_AMD_DEFINE_RESULT__ = function(amdModule) {
amdModule.amd();
}.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined &&
(module.exports = __WEBPACK_AMD_DEFINE_RESULT__)
);
}
其實就是引入了amd.js暴露的{amd:[Function: amd]}
css/image?
css和image也可以成為webpack的模塊，這是令人震驚的，這就不能通過普通的hack commonjs或者函數調用簡單去調用了，這就是anything to JS，它就需要借助webpack loader去實現了
像css就是轉換成一段js代碼，通過處理，調用時就是可以用js將這段css插入到style中，image也類似，這部分就不詳細闡述了，有興趣的讀者可以深入去研究
webpack3新特性
我們可以再順便看下webpack3新特性的表現
具體可以看這里medium.com/webpack/web…
Scope Hoisting
我們可以發(fā)現模塊數組是一個一個獨立的函數然后閉包引用webpack主函數的相應內容，每個模塊都是獨立的，然后帶來的結果是在瀏覽器中執(zhí)行速度變慢，然后webpack3學習了Closure Compiler和RollupJS這兩個工具，連接所有閉包到一個閉包里，放入一個函數，讓執(zhí)行速度更快,并且整體代碼體積也會有所縮小
我們可以實際看一下效果（要注意的是這個特性只支持ES Modules,是不支持CommonJs和AMD的）
使用上面的例子，配置webpack.config.js，增加new webpack.optimize.ModuleConcatenationPlugin()
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
},
plugins: [
new webpack.optimize.ModuleConcatenationPlugin(),
]
};
打包
/******/ (function(modules) { // webpackBootstrap
// ... 省略代碼
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, __webpack_exports__, __webpack_require__) {
"use strict";
Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
// CONCATENATED MODULE: ./src/es.js
function es() {
console.log('ES Modules');
}
function esTwo() {
console.log('ES Modules Two');
}
function esThree() {
console.log('ES Modules Three');
}
function esFour() {
console.log('ES Modules Four');
}
// CONCATENATED MODULE: ./src/index.js
// src/index.js
console.log('hello world');
es();
/***/ })
/******/ ]);
我們可以驚喜的發(fā)現沒有什么require了，它們拼接成了一個函數，good!😃
Magic Comments
code splitting是webpack一個重點特性之一，涉及到要動態(tài)引入的時候，webpack可以使用 require.ensure去實現，后來webpack2支持使用了符合 ECMAScript 提案 的 import() 語法，但是它有個不足之處，無法指定chunk的名稱chunkName,為了解決這個問題，出現了Magic Comments，支持用注釋的方式去指定，如下
import(/* webpackChunkName: "my-chunk-name" */ 'module');
小結
webpack是一個強大的模塊打包工具，在處理依賴、模塊上都很優(yōu)秀，本文從bundle.js文件分析出發(fā)去探索了不同模塊方案的加載機制，初步去理解webpack，并且對webpack3特性進行闡述，當然，webpack還有很多地方需要去探索深究，敬請期待以后的文章吧～關于本文如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要為大家詳細介紹了js+SVG實現動態(tài)時鐘效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-07-07
這篇文章主要給大家介紹了關于javascript實現搜索篩選功能的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-11-11
這篇文章主要給大家介紹了關于ES6的異步終極解決方案，文中通過示例代碼介紹的非常詳細，對大家學習或者使用ES6具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-07-07
Javascript中Null和undefined的簡單理解
在JavaScript中存在這樣兩種原始類型:Null與Undefined,這兩種類型常常會使JavaScript的開發(fā)人員產生疑惑,在什么時候是Null,什么時候又是Undefined,下面這篇文章主要給大家介紹了關于Javascript中Null和undefined的相關資料,需要的朋友可以參考下2022-04-04
本文將會討論客戶端JavaScript中的錯誤處理。主要介紹JavaScript中的易犯錯誤、錯誤處理、異步代碼編寫等內容。下面就讓我們一起看看如何正確處理JavaScript中的錯誤2017-10-10
這篇文章主要介紹了LayUI樹形表格treetable使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本文通過實例代碼給大家介紹了django js 實現表格動態(tài)標序號 ,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
微信小程序scroll-view橫向滑動嵌套for循環(huán)的示例代碼
這篇文章主要介紹了微信小程序scroll-view橫向滑動嵌套for循環(huán)的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了JavaScript實現隨機五位數驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
JavaScript進階教程之函數的定義、調用及this指向問題詳解
這篇文章主要給大家介紹了關于JavaScript進階教程之函數的定義、調用及this指向問題的相關資料,文中通過實例代碼介紹的非常詳細,對大家學習或者使用js具有一定的參考學習價值,需要的朋友可以參考下2022-09-09