深入理解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了
未完待续...