在學習源碼之前，我們首先需要做的事情是，確保版本的穩定性。
因為代碼是不斷變化的，
包括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 進行加載。
這里體現了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根目錄下，執行以下命令，
$ 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
