Webpack-dev-server中app.js的console.log输出无法显示，求技术指导

我来帮你捋捋排查的方向，你遇到的这个问题我在Truffle结合Webpack的项目里碰过好几次，大概率是几个常见的小疏忽导致的：

1. 先确认你找对了控制台！ #

很多人会混淆终端里的Webpack控制台和浏览器开发者工具的Console标签——你要找的"starting!"是在浏览器的控制台里，不是运行webpack-dev-server的终端里。先打开http://localhost:8080，按F12调出开发者工具，切换到Console标签，再刷新页面看看。

2. 检查index.html是否正确引入了打包后的app.js #

你的Webpack配置里用了CopyWebpackPlugin把app/index.html复制到build文件夹，但如果原index.html里没有引入打包后的app.js，那代码根本不会被执行。打开你的app/index.html，确认在<body>标签末尾有这行代码：

<script src="app.js"></script>

这是最常见的原因——Truffle Demo的默认index.html可能有这行，但如果你修改过或者不小心删掉了，就会导致脚本加载失败。

3. 调整Webpack Dev Server的静态文件路径配置 #

你的webpack.config.js里，devServer缺少了contentBase配置，它指定了dev-server提供静态文件的根目录。修改devServer部分：

devServer: {
  compress: true,
  disableHostCheck: true,
  quiet: false,
  noInfo: false,
  contentBase: path.resolve(__dirname, 'build'), // 新增这行，指定静态文件根目录
  stats: {
    colors: true,
    version: false,
    hash: false,
    timings: false,
    chunks: false,
    chunkModules: false
  }
}

这能确保dev-server正确从build文件夹加载静态资源，避免路径错误导致的404。

4. 验证脚本是否成功加载 #

打开浏览器开发者工具的Network标签，刷新页面，找到app.js的请求：

• 如果状态码是200：说明脚本加载成功，那问题可能出在代码执行顺序或者Babel编译（不过Webpack显示编译成功，概率较低）
• 如果是404：说明路径不对，检查output.filename和index.html里的script src是否匹配，比如如果output.filename是js/app.js，那src要改成js/app.js

快速验证步骤 #

1. 给app/index.html加上<script src="app.js"></script>
2. 修改webpack.config.js的devServer，加上contentBase配置
3. 重启webpack-dev-server
4. 访问http://localhost:8080，打开浏览器F12的Console标签，刷新页面

按照这个流程走，基本就能看到"starting!"的输出了。

内容的提问来源于stack exchange，提问作者Samuel Gosling