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

时间:2017-08-30 10:18:27

标签: webpack

我正在使用Webpack的开发服务器。它加载了一个工作页面,但是我在浏览器控制台中无法访问JavaScript变量。 EG如果我在JavaScript文件中有以下内容:

body

然后在浏览器控制台中输入"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack", "watch": "webpack --watch", "start": "webpack-dev-server --open" }, 表示未定义。

我正在使用Webpack 3.5.5(最新版)。我从我的package.json运行构建脚本:

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'
  },
  */

在我的webpack.config.js中,我指定了devServer,但删除它似乎没有任何区别。

// If pts is your array of float points and r,c are number of rows and columns of image
//calculate total number of points in array
int n = sizeof(pts) / sizeof(*pts);
//if points are stored in vector, then use n = pts.size()
//create binary image
cv::Mat image = cv::Mat::zeros(Size(c, r), CV_8UC1);
//fill all the points with value 255
for (int i = 0; i < n; i++) {
    image.at<uchar>(p[i]) = 255;
}
//find all contours in binary image and save in contours variale
vector<vector<Point>> contours;
vector<Vec4i> hierarchy;
findContours(image, contours, hierarchy, RETR_LIST, CHAIN_APPROX_NONE);

这是配置问题还是您应该访问JavaScript变量的另一种方式?

1 个答案:

答案 0 :(得分:2)

我认为这是预期的行为。 Webpack将script.js文件的内容包装到模块中。您在其中声明的任何变量都将是私有的。如果需要在浏览器控制台中访问变量,可以将其附加到import React, { Component } from 'react'; import './App.css'; class App extends Component { constructor(props) { super(props); this.state = { ws: new WebSocket('ws://localhost:8025/websockets/WSService'), value: '' }; this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); } handleChange(event) { this.setState({value: event.target.value}); console.log(this.state.value); } handleSubmit(event) { event.preventDefault(); this.state.ws.send(this.state.value); console.log(event.target.value); } render() { return ( <form onSubmit={this.handleSubmit}> <label> Name: <input type="text" value={this.state.value} onChange={this.handleChange} /> </label> <input type="submit" value="Submit" /> </form> ); } } export default App; 对象。

window