打包原理 · 前端筆記

參考：[前端工具鏈課（二）—— 模塊化工具及組件化思想](http://www.toutiao.com/a6357876639150096642/) [做了一夜動畫，讓大家十分鐘搞懂 Webpack](https://mp.weixin.qq.com/s/i6_fIcLDeDFmvZJj8NYrVg) **entry.js** ```javascript var foo = require('./foo.js'); // require('./style.css'); console.log(foo.bar); ``` **foo.js** ```javascript module.exports = { bar: 5555 } ``` **webpack.config.js** ```javascript module.exports = { entry: './entry.js', // 入口文件 output: { path: './build', filename: 'output.js' // 輸出文件路徑及文件名 }, module: { loaders: [ { test: /\.css$/, loader: 'style!css' } // `!` 是管道，loader 會從后往前依次執行 ] } } ``` **執行** ```shell webpack ``` **生成 ./build/output.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] = { exports: {}, id: moduleId, loaded: false }; // Execute the module function modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); // Flag the module as loaded module.loaded = 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; // __webpack_public_path__ __webpack_require__.p = ""; // Load entry module and return exports return __webpack_require__(0); }) /************************************************************************/ ([ /* 0 */ function(module, exports, __webpack_require__) { var foo = __webpack_require__(1); // require('./style.css'); console.log(foo.bar); }, /* 1 */ function(module, exports) { module.exports = { bar: 5555 } } ]); ``` 在控制臺執行`output.js`，輸出了`5555`。 * * * * * 以上是一個最簡單，最基本的由 `webpack` 將 `node CommonJS` 代碼轉化為瀏覽器端執行代碼的過程。 ### 下面來分析首先我們應該首先注意到，上面代碼 ~~~ /************************************************************************/ ~~~ 將兩段代碼分割開了，實際上是這樣的結構： ~~~ (function(){})() ~~~ 所以這就是一個匿名函數的自調用結構了。 ……有時間詳細分析吧，其實很簡單…… 參考： - [如何理解和熟練運用js中的call及apply？](https://www.zhihu.com/question/20289071) - [javascript里function之前加上感嘆號 ' ! ' 會怎么樣？](https://segmentfault.com/q/1010000000117476) - [function與感嘆號](https://swordair.com/function-and-exclamation-mark/) * * * * * ### 其他 ~~~javascript (function(globalObj){ if(typeof module === 'object' && typeof module.exports === 'object'){ module.exports = globalObj; }else{ if(window.salt){ window.salt['router'] = globalObj; }else{ window.salt = { router:globalObj } } } })(Salt_router) ~~~ >[danger] 注意這段js代碼可以在瀏覽器環境和`NodeJS`環境中運行哦。（node環境下webpack打包時會導出模塊，而在瀏覽器上運行時，會暴露出全局變量） ### 擴展 html head里面的加載器： ~~~html <head> ……  <script> var PUBLIC_URL = 'http://niceui.cn/public'; var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "//#/hm.js?cb41502e6f72ba22487a33d4a5d7f9df"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> …… </head> ~~~ update：2017-3-7 13:49:55