7
私はthis guideのjavascriptとwebpackを使用してnode.js Webアプリケーションを実行しています。 Chromeのデバッガ拡張機能をインストールしました。ChromeのVSCode/Javascriptにブレークポイントが設定されていません
私はコマンドを使用してノード・サーバを実行します。
webpack-dev-server --progress --colors
私もWebPACKの--devtoolソースマップを実行した
私の打ち上げの設定は次のようになります。
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
webpack-dev-server --progress -colorsを実行してVSCodeでF5を押すと、WebページでChromeが読み込まれますが、ブレークポイントはすべて赤色で表示されますが、配置された時点では、コードを実行している行には表示されません）。ブレークポイントもヒットしないので、デバッグマッピングに何か問題があると思います。私がブレークポイントを置いたときにランダムなファイルがロードされ、node_modules/firebase/index.jsのような目に見えないブレークポイントがヒットします。コメントアウトされた行の目に見えないブレークポイントがヒットします。
vscodeの.scriptsを実行すると、（私の）entry.jsファイル（すべてのモジュールの中で）がブレークポイントをヒットしようとしています。つまり、-webpack：///./entry.js d：\ myproject \ entry.js）
すべてが私のディレクトリのルートに置かれます（ディレクトリを間違えた場合のスクリーンショット）。
また、私webpack.config.jsファイル：
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
};
バンドルされたファイルの配置場所などのルートディレクトリ構造を表示してください。 –
@AjayGupta私はちょうどルートディレクトリフォルダの写真を添付しました。それはあなたが見たいと思っていたかどうかを教えてください:) – tweetypi
'ビルド'はすべてのバンドル資産がどこに行くのですか？ –