深刻理解webpack

本文需要知道的两个npm命令 npx 和 npm linknpx:我们知道，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 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-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.js18 配置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。未完待续…