在学习源码之前，我们首先需要做的事情是，确保版本的稳定性。
因为代码是不断变化的，
包括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
webpwebpaconst 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
网友评论