資訊專欄INFORMATION COLUMN
摘要：模塊化原理簡析的核心原理一切皆模塊在中，，靜態資源文件等都可以視作模塊便于管理，利于重復利用按需加載進行代碼分割，實現按需加載。模塊化原理以為例，分析構建的模塊化方式。
webpack模塊化原理簡析
1.webpack的核心原理
一切皆模塊：在webpack中，css,html.js，靜態資源文件等都可以視作模塊；便于管理，利于重復利用；
按需加載：進行代碼分割，實現按需加載。
2. webpack模塊化原理：以js為例，分析webpack構建common.js的模塊化方式。
①構建示例代碼
//b.js
let b =3
export ;
//a.js
let b = require("./b.js")
let a = b+123;
//webpack.config.js
let path = require("path")
module.exports = {
entry: "./a.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "build")},
module: {
loaders: [{
test: /.js$/,
loader: "babel-loader",
query: {
presets: ["es2015"]}}}}
②分析bundle.js
a.整體結構：整個bundle.js整個是一個執行函數，傳進去的參數是一個個的模塊，也是一個的函數，通過函數的作用于達到模塊化的效果。
(function (modules) {………………})([ //模塊初始化
function (module, exports, __webpack_require__) {
/* 模塊a.js的代碼 */},
function (module, exports, __webpack_require__) {
/* 模塊b.js的代碼 */}]);
b.模塊初始化
//1.定義一個模塊緩存的容器
var installedModules = {};
//2.webpack的require實現
function __webpack_require__(moduleId) {//傳參是模塊ID
//3.判斷模塊是否緩存，若是緩存了就不用加載，直接返還這個已緩存的模塊
if(installedModules[moduleId]) {
return installedModules[moduleId].exports;}
// 4.若是沒有被緩存，則緩存這個模塊
var module = installedModules[moduleId] = {
i: moduleId, //模塊ID
l: false, //標識模塊是否加載
exports: {}
};
//5.執行模塊函數，modules代表一系列的模塊函數，要動態綁定module.exports，綁定this；可以交叉連續引用。
modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
// 6.標記模塊已經被加載
module.l = true;
// 7.返回該模塊的exports
return module.exports;}
//8.require第一個 模塊
return __webpack_require__(0);
}
c.模塊函數
//a.js模塊
function(module, exports, __webpack_require__) {
"use strict";
var b = __webpack_require__(1);//重復調用
var a = b + 123;}
//b.js模塊
function(module, exports, __webpack_require__) {
"use strict";
var b = 3;
exports.b = b;}
d.下面是執行的流程圖，指定一個初始模塊，所有被引用的模塊會響應的循環加載。
ps幾個小問題
1.在模塊加載的時候，最后傳遞的一個參數是__webpack_require__，是全局定義的函數，為什么是全局的呢，因為自執行函數的this指向全局。
2.commond.js需要注意模塊導出的問題
①exports不能直接賦值，無用，因為源碼中返回的是module.exports；
②可以在exports上增加屬性，比如exports.fn=；這樣module.exports會變化，最終導出的是module.exports也會變化；
//node.js部分源碼，node也是通過閉包實現模塊的隔離
(function(exports,module,require,__dirname,__filename){
this = module.exports //this是指向module.exports的
module.exports = exports = {}
return module.exports})()
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84461.html
摘要：用來轉換內容，內部調用了方法進行轉換，這里簡單介紹一下的原理將代碼解析成，對進行轉譯，得到新的，新的通過轉換成，核心方法在中的方法，有興趣可以去了解一下。將函數傳入參數和歸并，得到。通常我們是用不上的，估計在某些中可能會使用到。 什么是Loader? 繼上兩篇文章webpack工作原理介紹（上篇、下篇）,我們了解到Loader：模塊轉換器，也就是將模塊的內容按照需求裝換成新內容，而且每...
摘要：需要得到最后一個產生的處理結果。這個處理結果應該是或者被轉換為一個，代表了模塊的源碼。另外還可以傳遞一個可選的結果格式為對象。在異步模式中，必須調用，來指示等待異步結果，它會返回回調函數，隨后必須返回并且調用該回調函數。 準備工作 安裝 Node.js, 建議安裝LTS長期支持版本 mkdir webpack and cd webpack and npm init -y npm ...
摘要：剛看到這仨頁面的時候，我就想著可以用路由，做成三端統一。樣式這部分真的三端基本是高度統一的，部分微調一下就可以了，也正是這樣，我們后續才能迅速解決和。終于不是談談三端統一了，也是真的體驗了一次，雖然最后有點出入，但是下次基本是沒問題了。 目錄 Weex系列(序) —— 總要知道原生的一點東東(iOS) Weex系列(序) —— 總要知道原生的一點東東(Android) Weex系列(...
閱讀 1563·2021-11-23 09:51
閱讀 1098·2021-10-12 10:12
閱讀 2816·2021-09-22 16:06
閱讀 3643·2019-08-30 15:56
閱讀 3470·2019-08-30 15:53
閱讀 3114·2019-08-29 16:29
閱讀 2366·2019-08-29 15:27
閱讀 2022·2019-08-26 10:49
