浏览器控制台没有看到使用Webpack的开发服务器的JavaScript变量

Question

我使用Webpack的开发服务器。它加载了一个工作页面，但我无法访问浏览器控制台中的JavaScript变量。例如，如果我有一个JavaScript文件如下：

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

然后在我的浏览器控制台输入body说，它没有定义。

使用Webpack 3.5.5（最新版）。我可是从我的package.json运行构建脚本：

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

在我webpack.config.js我被指定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;