在瀏覽器中找不到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文件，但編譯正確

回答

相關問題