在學習源碼之前，我們首先需要做的事情是，確保版本的穩(wěn)定性。
因為代碼是不斷變化的，
包括Node.js的版本，webpack的版本，各方依賴的版本。

1. 使用nvm管理Node.js版本

我們先來看Node.js的版本問題。

nvm 是 Node Version Manager 命令行工具，
安裝方式可以參考github倉庫。

1.1 刪除已安裝的Node.js

命令行中貼入這些bash命令即可，

#!/bin/bash
lsbom -f -l -s -pf /var/db/receipts/org.nodejs.pkg.bom \
| while read i; do
  sudo rm /usr/local/${i}
done
sudo rm -rf /usr/local/lib/node \
     /usr/local/lib/node_modules \
     /var/db/receipts/org.nodejs.*

1.2 安裝nvm（v0.33.11）

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

安裝后查看下nvm的版本，

$ nvm --version
0.33.11

1.3 使用nvm

（1）安裝最新的LTS版本

$ nvm intall --lts

（2）使用指定的Node.js版本

$ nvm use 8.12.0

1.4 檢查下Node.js的版本

$ node --version
v8.12.0

2. 新建一個webpack最簡項目

由于通常的webpack項目，都是通過命令行調用 webpack 運行的，
其原理一開始我也不知道，所以我們不如就從頭開始吧。

我要先把一個能運行的最簡webpack項目搭建起來才行。
以下我們新建了一個debug-webpack文件夾，然后配置webpack.config.js文件，
編寫源碼，然后再調用 webpack 命令行工具進行打包。

2.1 新建debug-webpack文件夾，并初始化

$ mkdir ~/Test/debug-webpack 
$ cd ~/Test/debug-webpack 
$ npm init -f

2.2 添加webpack.config.js和src/index.js

（1）webpack.config.js

const path = require('path');

module.exports = {
    entry: {
        index: path.resolve(__dirname, 'src/index.js'),
    },
    output: {
        path: path.resolve(__dirname, 'dist/'),
    },
    module: {
        rules: [
            { test: /\.js$/, use: { loader: 'babel-loader', query: { presets: ['@babel/preset-env'] } } },
        ]
    },
};

這里我們解釋一下，
entry 指定了入口文件，webpack會從這里開始進行構建。
output 指定了目標文件的輸出地址，
module.rules 制定了webpack載入文件的方式，示例中指明對于 .js 文件，我們采用babel-loader 進行加載。

這里體現(xiàn)了webpack的一個強大之處，
我們可以為各種具有不同后綴名的文件，指定不同的loader進行加載，
用戶可以寫自己的loader。

entry，output，loader相關的概念，可以查閱官方文檔：https://webpack.js.org/concepts/#entry
??
（2）src/index.js

alert();

2.3 安裝依賴

$ npm i -D \
webpack@4.20.2 \
webpack-cli@3.1.2 \
babel-loader@8.0.4 \
@babel/core@7.1.2 \
@babel/preset-env@7.1.0

各依賴版本號，

"devDependencies": {
    "@babel/core": "^7.1.2",
    "@babel/preset-env": "^7.1.0",
    "babel-loader": "^8.0.4",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2"
}

2.4 npm scripts

配置package.json中的scripts字段，

{
    ...,
    "scripts:": {
        ...,
        "build": "webpack"
    }
    ...,
}

這樣我們就可以通過npm run build來調用node_modules/.bin/webpack了。

這是因為npm run會自動添加node_module/.bin 到當前命令所用的PATH變量中。
這一點我們可以參考npm-run-script文檔。

2.5 運行webpack

我們在debug-webpack根目錄下，執(zhí)行以下命令，

$ npm run build

> debug-webpack@1.0.0 build ~/Test/debug-webpack
> webpack

Hash: 2e91628041d9a877f709
Version: webpack 4.20.2
Time: 639ms
Built at: 2018-10-09 09:25:24
   Asset       Size  Chunks             Chunk Names
index.js  937 bytes       0  [emitted]  index
Entrypoint index = index.js
[0] ./src/index.js 8 bytes {0} [built]

2.6 編譯結果

我們打開目標文件，./dist/index.js

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t){alert()}]);

參考

github: nvm
github: uninstallNodejs
gist: Uninstall nodejs from OSX Yosemite
webpack
npm-run-script