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" index.js
import _ from 'lodash';
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild 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中
