0x01 webpack源码分析之webpack启动程序

最新推荐文章于 2024-06-19 21:56:52 发布

ETP过河卒

最新推荐文章于 2024-06-19 21:56:52 发布

阅读量401

点赞数

分类专栏： nodejs webpack 源码文章标签： webpack 源码调试

本文链接：https://blog.csdn.net/dingshuangyong/article/details/83448588

版权

nodejs 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

webpack

4 篇文章 0 订阅

订阅专栏

源码

4 篇文章 0 订阅

订阅专栏

序言（吹水）

之前一直想跟踪一下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/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

启动webpack

启动的命令非常的简单，打开控制台，用cd命令到webpack-demo目录下，然后

npm run build

我这里是用npm scripts来启动webpack，详见package.json中的scripts.build的内容。他相当于下面的命令

webpack --config webpack.config.js

同时呢npm会把./node_modules/.bin加入到PATH环境变量中（PATH这个环境变量你懂吧），所以又相当于下面的命令

./node_modules/.bin/webpack --config webpack.config.js

安装webpack时，会往./node_modules/.bin下添加几个文件，自己可以打开看看，如果想知道npm scripts的所有环境变量的话，可以用下面命令查看

npm run env

./node_modules/.bin/webpack这个文件只是一个快捷方式(符合链接)，它其实就是./node_modules/webpack/bin/webpack.js，这个js文件的开头有这样一个注释，说明这个文件要用node来执行

#!/usr/bin/env node

所以最终得出的启动命令如下：

node ./node_modules/.bin/webpack --config webpack.config.js

对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，点击下图的小图标
chrome
然后就会打开devtool，并且自动连上默认的调试端口
在这里插入图片描述
然后可以把node_modules/webpack文件夹加入到devtool中

在这里插入图片描述

在这里插入图片描述
后面就可以愉快的调试啦，另外node的调试这块可以使用node-inspector，比上述方法还要简单一些，百度上都有，我这里就不多说了。
本章节主要涉及到的东西：npm scripts和node调试。下面附上一些资料（英语大家都懂得吧）
npm scripts：
[1] https://docs.npmjs.com/cli/run-script
[2] https://docs.npmjs.com/misc/scripts
node调试：
[3] https://nodejs.org/docs/latest-v9.x/api/debugger.html#debugger_v8_inspector_integration_for_node_js