webpack只是乙個打包模組的機制，只是把依賴的模組轉化成可以代表這些包的靜態檔案。並不是什麼commonjs或者amd之類的模組化規範。webpack就是識別你的 入口檔案。識別你的模組依賴，來打包你的**。至於你的**使用的是commonjs還是amd或者es6的import。webpack都會對其進行分析。來獲取**的依賴。webpack做的就是分析**。轉換**，編譯**，輸出**。webpack本身是乙個node的模組，所以webpack.config.js是以commonjs形式書寫的(node中的模組化是commonjs規範的)
webpack中每個模組有乙個唯一的id，是從0開始遞增的。整個打包後的bundle.js是乙個匿名函式自執行。引數則為乙個陣列。陣列的每一項都為個function。function的內容則為每個模組的內容，並按照require的順序排列。
// webpack.config.js
module.exports = ;
/******/ // the require function
/******/ function __webpack_require__(moduleid) ,
/******/ 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 b = __webpack_require__(1);
console.log('a');
b.b1();
/* 1 */
/***/ function(module, exports) {
exports.b1 = function () {
console.log('b1')
exports.b2 = function () {
console.log('b2')
我們看到_webpack_require是模組載入函式，接收模組id(對，webpack中每個模組都會有乙個獨一無二的id，其實也就是在iife傳引數組中的索引值(0，1，2.....)
a依賴b，所以在a中呼叫webpack載入模組的函式
// 1是模組b的id
var b = __webpack_require__(1);
無論什麼模組規範書寫。我們的webpack進行識別後打包的內容不會相差很多，webpack有優秀的語法分析能力，支援 commonjs amd 等規範。
webpack為什麼能把任何形式的資源都視作模組呢？因為loader機制。不同的資源採用不同的loader進行轉換。cmd、amd 、import、css 、等都有相應的loader去進行轉換。那為什麼我們平時寫的es6的模組機制，不用增加import的loader呢。因為我們使用了babel把import轉換成了require。並且webpack 2 將增加對 es6 模組的原生支援並且混用 es6、amd 和 commonjs 模組。這意味著 webpack 現在可以識別 import 和 export 了，不需要先把它們轉換成 commonjs 模組的格式：webpack 2 有哪些新東西webpack對於es模組的實現，也是基於自己實現的webpack_require 和webpack_exports ，裝換成類似於commonjs的形式。es6 module是靜態的依賴,所以在執行前進行**轉換,這裡的實現是將所有匯出項作為乙個物件的屬性,在入口檔案執行時,去遞迴的載入模組。
如何實現乙個簡單的webpack
讀取檔案分析模組依賴
對模組進行解析執行(深度遍歷)
針對不同的模組使用相應的loader
編譯模組，生成抽象語法樹ast。
loader原理
在解析對於檔案，會自動去呼叫響應的loaderloader 本質上是乙個函式，輸入引數是乙個字串，輸出引數也是乙個字串。當然，輸出的引數會被當成是 js **，從而被 esprima 解析成 ast，觸發進一步的依賴解析。webpack會按照從右到左的順序執行loader。
webpack——令人困惑的地方
webpack打包快取 webpack打包效能分析
webpack提供的uglifyjs外掛程式由於採用單執行緒壓縮，速度很慢 webpack parallel uglify plugin外掛程式可以並行執行uglifyjs外掛程式，這可以有效減少構建時間，當然，該外掛程式應用於生產環境而非開發環境，配置如下 var paralleluglifypl...
webpack打包快取 webpack打包優化探索
雖然webpack的已經公升級到了webpack4，而我們目前還在使用 webpack3，但其中的優化點都大同小異，公升級後同樣適用。效能優化初步原則 這三條原則永遠是一切優化的前提 優化配置 公升級webpack 3，優化js的編譯能力 scope hoisting 1performance 減小...
webpack入門demo（二）打包css
模組開發，在我看來就是把乙個檔案模組的資料拿出來，另乙個檔案接收這個資料，就是特麼不寫在一起 對小專案來說，有點多此一舉的感覺 commonjs規範讓js也可以寫後端，連資料庫，寫介面 require exports 匯入匯出定義模組 講這個好像跟webpack沒什麼關係 如果寫過node專案的話應...