[FE] webpack群侠传（二）：准备工作

2018-10-24 本文已影响11人何幻

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