在浏览器中找不到Javascript文件，但编译正确

我经历了在Microsoft Virtual Academy上发现的React Introduction，并下载了相关GitHub repo中的代码。在这一点上，我只是想让我简单的Index.html页面创建一个空的React Div标签。在浏览器中找不到Javascript文件，但编译正确

但是我在创建我的环境时遇到了问题我安装了node.js，从github下载了开始代码，做了我的npm安装，并且在编译时得到了错误“Breaking Change：不再允许忽略'-loader'当使用装载机时，你需要指定文件加载器而不是文件，我通过将模块中的webpack.config.js .html加载器从“file？name = [name]。[ext]”更改为“file -loader？name = [name]。[ext]“。

然而，在编译时收到一个错误，指出”Conflict：Multiple assets emit to the same filename“错误。将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（统一资源标识符）匹配的任何内容。 GET - http://localhost:8080/app.js

来源

2017-05-05 jgoraya

你说的错误中提到“bundle.js”，但我不明白的任何地方引用bundle.js您码。你能发布你在浏览器中看到的整个错误吗？此外，您可以尝试将[name] .js更改回bundle.js，并在'entry'下删除html属性。 – hansn

@hansn感谢您的评论。我正在尝试一些东西，包括bundle.js，并从我的Index.html中调用特定的js文件，这是目前的。我已编辑帖子，包括从控制台的错误，并更新我的帖子，以删除对bundle.js的引用，并将其更改为app.js – jgoraya

@hansn我也尝试了您的建议，删除条目下的html属性，改变了输出文件名属性为[name] .js中的bundle.js，然后更新Index.html以引用./bundle.js并进行编译。我得到相同的404错误，除了GET部分的错误状态http：// localhost：8080/bundle.js – jgoraya

好像看起来像在我的输入文件中添加括号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 
    } 
};

来源

2017-05-05 22:19:31 jgoraya

在浏览器中找不到Javascript文件，但编译正确

回答

相关问题