本文适用于已经会使用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/inspector
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的原创文章,请关注公众号"汪子熙":
相关推荐
Webpack打包实例测试代码
webpack打包构建流程
webpack打包教程.zip webpack是最流行的前端自动化打包工具,今天来个他的教程
本文件是为了配合webpack2 打包 react 这篇博文路径教程的 demo文件: http://blog.csdn.net/xuelang532777032/article/details/66969574 方便各位同学下下来学习webpack 打包 react 。
使用webpack打包原生小程序,并优化对小程序的一些功能点进行优化
随着前端体积越来越大,功能越来越丰富,这时候就需要将前端工程化,而webpack就是用于将前端各种文件打包起来。一个简单的webpack应该包含以下几个概念 入口起点 输出 配置 组件 加载器 插件 模块 模块热...
vue指令拖拽,webpack打包拖拽
webpack打包react项目的模版
vue 相关的js,webpack打包文
似乎所有问题都解决了,但有个问题没有解决,就是如果我在css引了了图资源,webpack并不能很好的处理这的资源路径“m”件夹是站下的个录,如果我在开发的时候,
使用webpack打包的react案例demo。 对应2.1.nodejs使用react的准备工作以及webpack配置
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理...
webpack打包学习
最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图: 打开控制台查看元素样式,发现在开发环境的时候”微软雅黑”被解析成unicode编码并且带着双引号, 但使用...
webpack 打包构建流程 包括深层打包 js css html 等等
基于webpack4的一个针对vue基础项目的打包配置,对基础的vue项目进行简单的打包配置,可以支持less,scss,sass等css预编译,简单明了,教程:https://www.jianshu.com/p/81bfe6ba1c04
使用之前请更改package.json以及使用npm install安装必要的包 启动命令:webpack
如何使用webpack打包JS 我们在命令行中输入:webpack -h看看webpack的命令行大全 Usage: webpack-cli [options] webpack-cli [options] --entry <entry> --output webpack-cli [options] <entries> --output ...
因此,需要用webpack单独打包指定文件。 CommonsChunkPlugin module.exports = { entry: { app: APP_FILE // 入口文件 }, output: { publicPath: './dist/', //输出目录,index.html寻找资源的地址 path: ...