0x01 webpack原始碼分析之webpack啟動程式
阿新 • • 發佈:2018-12-17
序言(吹水)
之前一直想跟蹤一下webpack的原始碼,奈何沉迷遊戲,無法自拔。等我回過頭,webpack已經更新到4.0啦,這更新速度比英雄聯盟還快,瞬間就s4了。從今天開始對webpack(4.0)的原始碼進行探索,但隨時可能斷更,咳咳。這一章呢,主要記錄一下webpack的啟動,以及除錯原始碼的方法。
測試程式碼
目錄結構
webpack-demo
|- package.json
|- index.html
|- src
|- index.js
|- dist
|- index.html
|-node-modules
............
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "demo",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack" : "^4.23.1",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"lodash": "^4.17.11"
}
}
index.js
import _ from 'lodash';
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild (component());
webpack.config.json
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
index.html
<!doctype html>
<html>
<head>
<title>起步</title>
<script src="https://unpkg.com/[email protected]"></script>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
啟動webpack
啟動的命令非常的簡單,開啟控制檯,用cd命令到webpack-demo目錄下,然後
npm run build
我這裡是用npm scripts來啟動webpack,詳見package.json中的scripts.build的內容。他相當於下面的命令
node webpack --config webpack.config.js
同時呢npm會把./node_modules/.bin加入到node的PATH環境變數中(PATH這個環境變數你懂吧),所以又相當於下面的命令
node ./node_modules/.bin/webpack --config webpack.config.js
安裝webpack時,會往./node_modules/.bin下新增幾個檔案,自己可以開啟看看,如果想知道npm scripts的所有環境變數的話,可以用下面命令檢視
npm run env
對webpack進行跟蹤除錯
上一節已經分析出webpack的啟動命令,除錯的話就很簡單了,就是nodejs的除錯方法。我這裡是用node的 --inspect命令引數來啟動除錯,然後用chrome的devtool偵錯程式連線到除錯埠進行除錯。 在控制檯下執行
node --inspect-brk ./node_modules/.bin/webpack --config webpack.config.js
-brk可以讓程式碼在第一行斷住,等待我們的偵錯程式接入。命令執行後,控制檯打印出如下資訊
Debugger listening on ws://127.0.0.1:9229/d86999be-8be6-47e4-b541-ee0ea159de9a
For help, see: https://nodejs.org/en/docs/inspector
埠號是預設的9229,然後我們啟動偵錯程式,開啟chrome,點選下圖的小圖示 然後就會開啟devtool,並且自動連上預設的除錯埠 然後可以把node_modules/webpack資料夾加入到devtool中