Webpackのdevサーバを使用してブラウザのコンソールにJavaScript変数が表示されない

Question

Webpackのdevサーバを使用しています。しかし、ブラウザのコンソールでJavaScript変数にアクセスすることはできません。 EGは、私がJavaScriptファイルに次のようしている場合：

const body = document.querySelector('body'); 

その後、私のブラウザコンソールでbodyを入力すると、その定義されていないと言います。

私はWebpack 3.5.5（最新）を使用しています。イムは、私のpackage.jsonからビルドスクリプトを実行している：私のwebpack.config.jsで

"scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1", 
    "build": "webpack", 
    "watch": "webpack --watch", 
    "start": "webpack-dev-server --open" 
    }, 

私はdevServerを指定するが、違いはありませんように思わ取り外しました。

const path = require('path'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const CleanWebpackPlugin = require('clean-webpack-plugin'); 

module.exports = { 
    entry: './src/script.js', 
    /* 
    devServer: { 
    contentBase: './dist' 
    }, 
    */ 

これは設定上の問題ですか、別の方法でJavaScript変数にアクセスすると思われますか？

Answer 1

これは予想される動作だと思います。 Webpackは、script.jsファイルの内容をモジュールにラップします。そこで宣言した変数はすべてプライベートになります。ブラウザコンソールで変数にアクセスする必要がある場合は、windowオブジェクトにアタッチすることができます。

const body = document.querySelector('body'); 
window.body = body;