在浏览器中未找到 Javascript 文件但编译正确答案

【问题标题】：Javascript File Not Found in Browser but Compiles Correctly在浏览器中未找到 Javascript 文件但编译正确
【发布时间】：2017-05-05 12:01:34
【问题描述】：

我浏览了 Microsoft Virtual Academy 上的 React Introduction 并下载了相关 GitHub repo 中的代码。此时我只是想让我的简单 Index.html 页面创建一个空的 React Div 标签。

但是我在建立我的环境时遇到了麻烦我安装了 node.js，从 github 下载了启动代码，我的 npm 安装并在编译时得到了错误“重大更改：它不再允许省略 '-loader' 时使用加载器。您需要指定文件加载器而不是文件。我通过将模块下的 webpack.config.js .html 加载器从“file?name=[name].[ext]”更改为“file- loader?name=[name].[ext]".

但是，在编译时，我收到一条错误消息，指出“冲突：多个资产发出相同的文件名”错误。我通过将 webpack.config.js 中的输出文件名从 bundle.js 更改为 [name].js 来修复此错误。

然后它编译得很好，但是在浏览器中查看它时，我注意到有一个错误指出“服务器没有找到任何与请求的 URI 匹配的东西”并提到了 app.js。

我尝试将 Index.html 中的调用更改为 app.js，但也遇到了同样的错误。我已尝试清除 app.js 中的代码，使其完全为空，但仍会收到请求的 URI 错误。下面是我非常简单的代码...

webpackag.config.js`var path = require('path');
var webpack = require('webpack');

module.exports = {
  context: path.join(__dirname, 'app'),
  entry: {
    javascript: './app.js',
    html: './index.html'
  },
  output: { 
    path: path.join(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    loaders: [
      {
        test: /.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.html$/,
        loader: "file-loader?name=[name].[ext]",
      },
      {
        test: /\.css$/, 
        loader: "style-loader!css-loader" 
      },
      { 
        test: /\.png$/, 
        loader: "url-loader?limit=100000" 
      },
      { 
        test: /\.jpg$/, 
        loader: "file-loader" 
      }
    ]
  },
  devServer: {
    historyApiFallback: true
  }
};

Index.html 的代码...`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Pizza Bot Manager</title>
  <link rel="stylesheet" href="/app/app.css">
</head>
<body>
  <div id="main">
  </div>
  <script src="./app.js"></script>
</body>
</html>

App.Js 代码如下...

var React = require('react');
var ReactDom = require('react-dom');

var App = React.createClass({
  render: function() {
    return (
      <div>         
      </div>
    )
  }
});

ReactDOM.render(<App />, Document.getElementById("main"));

` React 非常新，所以如果有人对如何解决此错误有任何建议，我将不胜感激

浏览器控制台中出现的错误

HTTP404: NOT FOUND - 服务器没有找到与请求的 URI（统一资源标识符）匹配的任何内容。获取 - http://localhost:8080/app.js

【问题讨论】：

你说错误提到了'bundle.js'，但我没有看到你的代码中任何地方引用了 bundle.js。您能否发布您在浏览器中看到的整个错误？另外，您可以尝试将 [name].js 改回 bundle.js，并删除 entry 下的 html 属性
@hansn 感谢您的评论。我正在尝试一些东西，包括 bundle.js，只是从我的 Index.html 中调用特定的 js 文件，这就是目前的情况。我已经编辑了帖子以包含来自控制台的错误，还更新了我的帖子以删除对 bundle.js 的引用并将其更改为 app.js
@hansn 我也尝试了删除条目下的 html 属性的建议，将输出文件名属性从 [name].js 更改为 bundle.js，然后更新 Index.html 以引用 ./ bundle.js 并编译。除了错误状态 localhost:8080/bundle.js 的 GET 部分之外，我得到了相同的 404 错误
我认为您正在输出到 /dist/app.js（或 /dist/bundle.js - 您选择的任何文件名。
@Patrick 这也是我的想法，但从 Index.html 我尝试转到 src = /app/dist/bundle.js 但仍然没有运气。

标签： javascript node.js reactjs webpack webpack-dev-server

【解决方案1】：

OK 看起来像在 webpack.config.js 中的输入文件周围添加括号似乎可以解决 404 错误。请参阅下面更新的“入口”代码以获得解决方案，以帮助可能遇到此问题的其他人...

var path = require('path');
var webpack = require('webpack');

module.exports = {
  context: path.join(__dirname, 'app'),
  /*entry: {
    html: './index.html',
    javascript: './app.js'
  },*/
  entry: ['./index.html','./app.js'],
  output: { 
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
        test: /\.html$/,
        loader: "file-loader?name=[name].[ext]",
      },
      {
        test: /\.css$/, 
        loader: "style-loader!css-loader" 
      },
      { 
        test: /\.png$/, 
        loader: "url-loader?limit=100000" 
      },
      { 
        test: /\.jpg$/, 
        loader: "file-loader" 
      }
    ]
  },
  devServer: {
    historyApiFallback: true
  }
};

【讨论】：