資訊專欄INFORMATION COLUMN
摘要：本文適用于已經(jīng)會使用的前端開發(fā)人員，但是想進(jìn)一步了解細(xì)節(jié)和進(jìn)階。搭好之后的項(xiàng)目結(jié)構(gòu)如下圖打開能看到字符串。下面介紹如何調(diào)試本身的打包過程。這個(gè)就是我們之前命令行里指定的參數(shù)然后點(diǎn)一下調(diào)試器里的繼續(xù)執(zhí)行，斷點(diǎn)就提留在我們設(shè)置在里的斷點(diǎn)了。
本文適用于已經(jīng)會使用webpack的前端開發(fā)人員，但是想進(jìn)一步了解webpack細(xì)節(jié)和進(jìn)階。
首先請讀者按照我前一篇文章?Webpack 10分鐘入門介紹的步驟，在本地搭建一個(gè)webpack的hello world項(xiàng)目。
搭好之后的項(xiàng)目結(jié)構(gòu)如下圖：
打開index.html能看到Hello World字符串。
下面介紹如何調(diào)試webpack本身的打包過程。
假設(shè)我們的需求是想調(diào)試項(xiàng)目文件夾下的webpack配置文件：webpack.config.js
那么我們在里面設(shè)置一個(gè)斷點(diǎn)：
1. 在當(dāng)前webpack項(xiàng)目工程文件夾下面，執(zhí)行命令行：
node --inspect-brk ./node_modules/webpack/bin/webpack.js --inline --progress
其中參數(shù)--inspect-brk就是以調(diào)試模式啟動node：
會觀察到輸出：
Debugger listening on ws://127.0.0.1:9229/19421955-0f12-44c7-95da-fa5dd8384e04
For help see https://nodejs.org/en/docs/in...
2. 打開Chrome瀏覽器，地址欄里輸入chrome://inspect/#devices：
在彈出窗口點(diǎn)擊超鏈接"Open Dedicated DevTools for Node.
此時(shí)在第一步的命令行窗口里，出現(xiàn)一行新的提示信息：debugger attached。
Chrome窗口彈出來了，斷點(diǎn)停留在webpack.js第一行處。這個(gè)webpack.js就是我們之前命令行里指定的參數(shù)：node --inspect-brk ./node_modules/webpack/bin/webpack.js --inline --progress
然后點(diǎn)一下Chrome調(diào)試器里的“繼續(xù)執(zhí)行”，斷點(diǎn)就提留在我們設(shè)置在webpack.config.js里的debugger斷點(diǎn)了。
要獲取更多Jerry的原創(chuàng)文章，請關(guān)注公眾號"汪子熙":
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98725.html
摘要：本文相關(guān)代碼已經(jīng)存放在，可自行下載使用多入口復(fù)習(xí)的優(yōu)勢不言而喻，因此在實(shí)際應(yīng)用中我們也常常使用它調(diào)試多入口應(yīng)用，所謂多入口是指多個(gè)頁面會使用多個(gè)入口文件，在官方教程介紹了如何配置這里指定了個(gè)入口文件，打包之后分別會在文件夾中生成個(gè)打包之后 本文相關(guān)代碼已經(jīng)存放在 dynamic-entry，可自行下載使用 0. 多入口 (復(fù)習(xí)) webpack 的優(yōu)勢不言而喻，因此在實(shí)際應(yīng)用中我們也常...
摘要：歷史上由于是作為的替代品出現(xiàn)，當(dāng)時(shí)要解決的問題是處理瀏覽器兼容問題，打包或，做一些公共資源替換，雪碧圖等，最后可以順帶合并到一個(gè)文件，但模塊化功能遠(yuǎn)遠(yuǎn)比弱，基本上只能合并，但不能理解模塊概念。 1 引言 說到前端編譯方案，也就是如何打包項(xiàng)目，如何編譯組件，可選方案有很多，比如： 通過 webpack / parcel / gulp 構(gòu)建項(xiàng)目。 通過 parcel / gulp / b...
摘要：本文介紹了作者接手維護(hù)一個(gè)中型歷史項(xiàng)目時(shí)的一系列改進(jìn)實(shí)踐，包括模塊結(jié)構(gòu)拆分業(yè)務(wù)邏輯梳理打包優(yōu)化等。代碼中如菜單名稱結(jié)構(gòu)表單字段名等的各種硬編碼配置分散在各處。最后，在提升面向開發(fā)者的打包體驗(yàn)方面，本次優(yōu)化中主要實(shí)現(xiàn)的是與的解耦。 本文介紹了作者接手維護(hù)一個(gè)中型 React 歷史項(xiàng)目時(shí)的一系列改進(jìn)實(shí)踐，包括模塊結(jié)構(gòu)拆分、業(yè)務(wù)邏輯梳理、Webpack 打包優(yōu)化等。 背景 這是一個(gè) PC 的...
摘要：概述最近研究了下工作流，先說一下我司的情況，我司現(xiàn)在是端用直出，用構(gòu)建，部分就不進(jìn)行描述了，因?yàn)榫W(wǎng)上的構(gòu)建方法都是很成熟的了。 概述 最近研究了下工作流，先說一下我司的情況，我司現(xiàn)在是pc端用php直出，h5用vuejs構(gòu)建，vuejs部分就不進(jìn)行描述了，因?yàn)榫W(wǎng)上的構(gòu)建方法都是很成熟的了。以下是php直出，需要向后臺同學(xué)提供html文件的構(gòu)建方法。調(diào)試都是在本地調(diào)試的，調(diào)試完成后打包生...
閱讀 3729·2021-11-25 09:43
閱讀 2609·2021-11-18 13:11
閱讀 2229·2019-08-30 15:55
閱讀 3279·2019-08-26 11:58
閱讀 2835·2019-08-26 10:47
閱讀 2237·2019-08-26 10:20
閱讀 1279·2019-08-23 17:59
閱讀 3014·2019-08-23 15:54
