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