阅读本篇文章能给你带来什么？

• 理解webpack的打包机制
• 手写一个简单的webpack

本文需要知道的两个npm命令 npx 和 npm link

npx:我们知道，npm5.2.0 引入了npx命令，当我们打包时 可以直接npx webpack，也可以实现打包

npm link:npm link命令可以将一个任意位置的npm包链接到全局执行环境，从而在任意位置使用命令行都可以直接运行该npm包。

也就是说 我们可以把我们自己模拟的webpack link到全局，进而也可以实现类似npx ..pack 的操作。

工欲善其事，必先利其器，下面开始配置属于我们自己的npx命令：

1 mkdir my-pick 创建目录my-pick2 npm init -y 初始化3 package.json中添加bin字段 注意用双引号:

{  "name": "my-pick",  "version": "1.0.0",  "description": "",  "main": "index.js",  "bin": {    "my-pack": "./bin/my-pick.js"  },  "scripts": {    "test": "echo \"Error: no test specified\" && exit 1"  },  "keywords": [],  "author": "",  "license": "ISC"}

4 在文件夹my-pick中 mkdir bin 创建bin目录

5 cd /bin6 touch my-pick.js7 在my-pick.js中的第一行添加:#! /usr/bin/env node 指定运行环境为node

#! /usr/bin/env nodeconsole.log('this is my pick.');

8 cd ../ 到my-pick目录

9 sudo npm link 回车 输入mac密码10 可以看到：

/usr/local/bin/my-pack -> /usr/local/lib/node_modules/git-webpack/bin/my-pick.js/usr/local/lib/node_modules/git-webpack -> /Users/apple/Desktop/my-pack

每人的电脑目录名称不同，出现类似这种就表示link到全局成功。

配置打包目录

11 另外新建一个新目录 mkdir my-webpack12 进入并初始化目录 npm init -y13 安装webpack npm i webpack webapck-cli -D14 新建src目录 mkdir src15 cd /src 16 为了实现模块间的互相引用 创建三个文件 touch index.js a.js b.js index.js:

console.log('index.js');require('./a');

a.js:

let b = require('./b');console.log('a.js');console.log(b);

b.js:

module.exports = 'b.js'

17 新建webpack配置文件 touch webapck.config.js

18 配置webpack.config.js

webpack.config.js:

let path = require('path');module.exports = {    mode:'development',    entry:'./src/index.js',    output:{        filename:'bunle.js',        path:path.resolve(__dirname,'dist')    }}

19 命令行运行 npx webpack

FunkyTiger:my-webpack apple$ npx webpackHash: a62b20a12c5ee84b0357Version: webpack 4.29.6Time: 88msBuilt at: 2019-03-06 11:51:36   Asset      Size  Chunks             Chunk Namesbunle.js  4.43 KiB    main  [emitted]  mainEntrypoint main = bunle.js[./src/a.js] 62 bytes {main} [built][./src/b.js] 25 bytes {main} [built][./src/index.js] 41 bytes {main} [built]

这个简单项目即打包成功

20 最后一步 把刚才npm link到全局的命令npx my-pick 再link到本地中使用21 运行命令： npm link my-pick 22 出现:

/Users/apple/Desktop/git-webpack/my-webpack/node_modules/my-pick -> /usr/local/lib/node_modules/my-pick -> /Users/apple/Desktop/git-webpack/my-pick

即表示link到本地成功 。

23 运行命令 npx my-pick 出现:

FunkyTiger:my-webpack apple$ npx my-pickmy-pick

打印出了 刚写的日志 my-pick. 即可使用自己的命令npx my-pick 来实现自己的webpack。

接下来就可以在my-pack中编写自己的webpack了

未完待续...