React webpack模組組織關係

現代前端開發離不開打包工具，以 webpack 為代表的打包工具已經成為日常開發必備之利器，拿 react 技術棧為例，我們 es6 形式的源**，需要經過 webpack 和 babel 處理，才能生成發布版檔案，在瀏覽器中執行。今天就結合 react 來梳理一下 webpack 打包時模組的組織結構，先給定下面乙個簡單的應用示例：

import react from 'react';
import reactdom from 'react-dom';
import  from './utils';

**中的 utils 模組如下：

export function greet(name) `;
}

如果編譯該示例**，由於要將第三方庫一起打包，最終生成的目標**會比較多，所以我們先在 webpack.config.prod.js 中將 react 和 reactdom 配置為 externals，不將它們編譯到目標**中，而是在執行時直接從外部取值。配置如下：

entry: './src/index.js',

externals: ,

output: ,

module: ]},

};執行 webpack，生成的目標**如下：

(function (modules) ;
// 載入函式
function __webpack_require__(moduleid) 
var module = installedmodules[moduleid] = ,
id: moduleid,
loaded: false
};// 呼叫模組函式 載入相應的模組
// 引數是(module, exports[, __webpack_require__])
modules[moduleid].call(module.exports, module, module.exports, __webpack_require__);
// 標記該模組已被載入
module.loaded = true;
// 最後也返回exports
return module.exports;
}  // 暴露modules和installedmodules物件
__webpack_require__.m = modules;
__webpack_require__.c = installedmodules;
// __webpack_public_path__
__webpack_require__.p = "";
// 載入主模組
return __webpack_require__(0);
})/* 以下是模組列表 作為引數被載入 */
([  /* 0 主模組 */
(function (module, exports, __webpack_require__) ;
}// 開始渲染檢視
'h1',
null,
(0, _utils.greet)('scott')
);}),
/* 1 react模組 */
(function (module, exports) ),
/* 2 reactdom模組 */
(function (module, exports) ),
/* 3 utils模組 */
(function (module, exports) );
exports.greet = greet;
function greet(name) 
})]);

上面就是基本的模組載入機制。其實，有了 externals 配置，我們也可以不在**中引入 react 和 react-dom，下面稍微修改一下**：

import  from './utils';

轉譯後的**如下：

(function (modules) )
/* 以下是模組列表 作為引數被載入 */
([  /* 0 主模組 */
(function (module, exports, __webpack_require__) ),
/* 1 utils模組 */
(function (module, exports) );
exports.greet = greet;
function greet(name) 
})]);

可以看到，**清晰了不少，主模組中直接呼叫 react.createelement() 來建立虛擬 dom 物件，最後呼叫 reactdom.render() 方法來渲染真實的 dom 結點。訪問下面的入口檔案，我們就可以看到程式執行的結果：

React webpack模組組織關係

react webpack專案實際開發應用

react webpack中js和css的引入

產品模組報表組的使用

React webpack模組組織關係

react webpack專案實際開發應用

react webpack中js和css的引入

產品模組 報表組的使用

相關推薦

產品模組報表組的使用