React + TypeScript + webpack + VS Code + Chromeでブレークポイントデバッグの設定方法
解決したいこと
React + TypeScript + webpack + VS Code + Chromeでブレークポイントデバッグできるようにしたいのですが、
sourceMapPathOverridesの部分が悪いのかSVcode上でブレークポイントが貼れずUnbound breakpointとなりうまくいきません。
参考サイトとの差異は、
webpackで/docsにいくつかのbundleファイルを作っている点と、
webpack.debug.config.jsを作らず、webpack.config.jsにdevserverの設定を記載した点です。
以下のフォルダ構成の場合、sourceMapPathOverridesはどのように設定すれば良いのでしょうか？
色々試してみたのですがどこがおかしいのか全く分かりません。
どうかお知恵をお貸しください。
参考にしたサイト
該当するソースコード
launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome",
"type": "pwa-chrome", // chromeも可
"request": "launch",
"url": "http://localhost:9025",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack://hoge/./src/*": "${webRoot}/ｓｒｃ/*" //開発ツールではプロジェクトのディレクトリ名が表示されたのでhogeにしています
},
"resolveSourceMapLocations": [
"${workspaceFolder}/**",
"!**/node_modules/**"
]
}
]
}
webpack.config.js
const path = require("path");
const webpack = require("webpack");
const { dependencies } = require("./package");
const rootPath = path.resolve(".");
const config = {
mode: "development",
devtool: "inline-source-map",
context: rootPath,
entry: {
index: "./src/pages/index/main.tsx",
lp: "./src/pages/lp/main.tsx",
},
output: {
path: `${rootPath}/docs`,
filename: "[name].bundle.js",
// publicPath: "/",
},
resolve: {
extensions: [".json", ".js", ".ts", ".tsx"],
},
module: {
rules: [
{
test: /\.tsx?$/,
exclude: [/node_modules/],
use: ["babel-loader"],
},
],
},
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: new RegExp(Object.keys(dependencies).join("|")),
name: "vendor",
chunks: "all",
},
},
},
},
devServer: {
static: {
directory: `${rootPath}/docs`,
watch: true,
},
compress: true,
host: "0.0.0.0",
port: 9025,
historyApiFallback: true,
},
};
module.exports = config;
フォルダ構成
hoge
|-.vscode-launch.json
|-docs-bundleファイル
|-src
|package.json
|webpack.config.json
|etc...
0 likes