smart-debug(不推荐)
caution
因侵入源码因此不再推荐使用,推荐通过 Chrome 插件比如 山海关 代理实现。
用于 debug 调试,常见于线上环境加载本地 assets 资源进行调试的场景:
- 开启调试后,可以指定页面加载本地 assets 资源
Install
$ npm i -save-dev build-plugin-smart-debug
Usage
{
"plugins": ["build-plugin-smart-debug"]
}
访问链接中开启 debug 调试,设置 smartDebug=true 进行开启
http://example.com/?smartDebug=true
开启后页面将默认加载本地入口脚本 127.0.0.1:3333/build/js/index.js,__webpack_public_path__ 将会变为 127.0.0.1:3333/build/。
默认加载的脚本地址,将会受
build.json中的outputDir和outputAssetPath.js配置影响,即默认入口文件路径规则${outputDir}/${outputAssetPath.js}/index.js。 对应入口 css 文件的规则为${outputDir}/${outputAssetPath.css}/index.css,build-plugin-smart-debug插件会自动通过 js 路径按规则替换并推导出 css 路径地址并进行自动加载。
支持定制的参数包括:
- 调试端口:
debugPort,例如设置调试 8080 端口,debugPort=8080,默认端口为:3333 - 入口脚本路径:
debugPath,debugPath=/build/index.js,页面将加载127.0.0.1:8080/build/index.js - 资源输出路径:
outputPath,outputPath=dist,即 runtime 的 publicPath 将会变成127.0.0.1:8080/dist/,outputPath默认读取build.json中的outputDir,如果不需要可以设置为outputPath=
如想加载的入口地址为 127.0.0.1:8080/dist/index.js, __webpack_public_path__路径为 127.0.0.1:8080/dist/,则可以在 url 中进行如下设置:
http://example.com/?smartDebug=true&debugPort=8080&debugPath=/dist/index.js&outputPath=dist