webpack打包過程如何調試？

ephererid 發布于2019-08-23 12:33 / 2832人閱讀

摘要：本文適用于已經會使用的前端開發人員，但是想進一步了解細節和進階。搭好之后的項目結構如下圖打開能看到字符串。下面介紹如何調試本身的打包過程。這個就是我們之前命令行里指定的參數然后點一下調試器里的繼續執行，斷點就提留在我們設置在里的斷點了。

本文適用于已經會使用webpack的前端開發人員，但是想進一步了解webpack細節和進階。

首先請讀者按照我前一篇文章?Webpack 10分鐘入門介紹的步驟，在本地搭建一個webpack的hello world項目。

搭好之后的項目結構如下圖：

打開index.html能看到Hello World字符串。

下面介紹如何調試webpack本身的打包過程。

假設我們的需求是想調試項目文件夾下的webpack配置文件：webpack.config.js

那么我們在里面設置一個斷點：

1. 在當前webpack項目工程文件夾下面，執行命令行：

node --inspect-brk ./node_modules/webpack/bin/webpack.js --inline --progress

其中參數--inspect-brk就是以調試模式啟動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：

在彈出窗口點擊超鏈接"Open Dedicated DevTools for Node.

此時在第一步的命令行窗口里，出現一行新的提示信息：debugger attached。

Chrome窗口彈出來了，斷點停留在webpack.js第一行處。這個webpack.js就是我們之前命令行里指定的參數：node --inspect-brk ./node_modules/webpack/bin/webpack.js --inline --progress

然后點一下Chrome調試器里的“繼續執行”，斷點就提留在我們設置在webpack.config.js里的debugger斷點了。

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

GPU云服務器云服務器 Webpack打包分塊 javascript如何調試如何調試javascript php接口如何調試

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98725.html

Webpack實戰 - 使用動態 entry 改善調試體驗

摘要：本文相關代碼已經存放在，可自行下載使用多入口復習的優勢不言而喻，因此在實際應用中我們也常常使用它調試多入口應用，所謂多入口是指多個頁面會使用多個入口文件，在官方教程介紹了如何配置這里指定了個入口文件，打包之后分別會在文件夾中生成個打包之后本文相關代碼已經存放在 dynamic-entry，可自行下載使用 0. 多入口 (復習) webpack 的優勢不言而喻，因此在實際應用中我們也常...

oogh 2019-08-20 13:35 評論0 收藏0
精讀《如何編譯前端項目與組件》

摘要：歷史上由于是作為的替代品出現，當時要解決的問題是處理瀏覽器兼容問題，打包或，做一些公共資源替換，雪碧圖等，最后可以順帶合并到一個文件，但模塊化功能遠遠比弱，基本上只能合并，但不能理解模塊概念。 1 引言說到前端編譯方案，也就是如何打包項目，如何編譯組件，可選方案有很多，比如：通過 webpack / parcel / gulp 構建項目。通過 parcel / gulp / b...

jiekechoo 2019-08-23 14:52 評論0 收藏0
React 歷史項目維護與優化實踐

摘要：本文介紹了作者接手維護一個中型歷史項目時的一系列改進實踐，包括模塊結構拆分業務邏輯梳理打包優化等。代碼中如菜單名稱結構表單字段名等的各種硬編碼配置分散在各處。最后，在提升面向開發者的打包體驗方面，本次優化中主要實現的是與的解耦。本文介紹了作者接手維護一個中型 React 歷史項目時的一系列改進實踐，包括模塊結構拆分、業務邏輯梳理、Webpack 打包優化等。背景這是一個 PC 的...

toddmark 2019-08-20 16:50 評論0 收藏0
gulp+webpack工作流探索

摘要：概述最近研究了下工作流，先說一下我司的情況，我司現在是端用直出，用構建，部分就不進行描述了，因為網上的構建方法都是很成熟的了。概述最近研究了下工作流，先說一下我司的情況，我司現在是pc端用php直出，h5用vuejs構建，vuejs部分就不進行描述了，因為網上的構建方法都是很成熟的了。以下是php直出，需要向后臺同學提供html文件的構建方法。調試都是在本地調試的，調試完成后打包生...

fancyLuo 2019-08-22 10:35 評論0 收藏0