深入理解webpack打包机制(一)

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

• 理解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-pick
2 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 /bin
6 touch my-pick.js
7 在my-pick.js中的第一行添加:#! /usr/bin/env node 指定运行环境为node

#! /usr/bin/env node

console.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-webpack
12 进入并初始化目录 npm init -y
13 安装webpack npm i webpack webapck-cli -D
14 新建src目录 mkdir src
15 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 webpack
Hash: a62b20a12c5ee84b0357
Version: webpack 4.29.6
Time: 88ms
Built at: 2019-03-06 11:51:36
   Asset      Size  Chunks             Chunk Names
bunle.js  4.43 KiB    main  [emitted]  main
Entrypoint 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-pick
my-pick

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

接下来就可以在my-pack中编写自己的webpack了
未完待续...