[英]React & Webpack: Loading failed for the <script> with source http://localhost:8080/app/bundle.js
I am new in reactjs.我是 reactjs 的新手。 I tried to configure react with basic index page including index.js(containing a console.log()) but when i tried to run server index.html showing properly but bundle.js is not loading.
我尝试使用包括 index.js(包含 console.log())在内的基本索引页面配置反应,但是当我尝试运行服务器 index.html 显示正确但 bundle.js 未加载时。 I search it a lot but not getting proper answer can any one help me please.
我搜索了很多,但没有得到正确的答案,请任何人帮助我。
my webpack.config.js is我的 webpack.config.js 是
// Webpack config js.
var webpack = require("webpack");
var path = require("path");
var DIST_VAR = path.resolve(__dirname, "dist");
var SRC_VAR = path.resolve(__dirname, "src");
var config = {
entry : SRC_VAR + "\\app\\index.js",
output: {
path: DIST_VAR + "\\app\\",
filename: "bundle.js",
publicPath : "\\app\\",
},
module: {
rules: [
{
test: /\.js?/,
include: SRC_VAR,
loader: "babel-loader",
query: {
presets: [ "react" , "es2015" , "stage-2"]
}
}
]
}
};
module.exports = config;
Error is showing in console: Loading failed for the with source “ http://localhost:8080/app/bundle.js ”.控制台中显示错误:源为“ http://localhost:8080/app/bundle.js ”的加载失败。
Edit:编辑:
Folder Listing added.. Folder PATH listing Volume serial number is BE9C-4E51添加了文件夹列表.. 文件夹路径列表卷序列号为 BE9C-4E51
C:.
| package-lock.json
| package.json
| webpack.config.js
|
+---dist
| | index.html
| |
| \---app
| bundle.js
|
+---node_modules
| <Here the node_modules>
\---src
| index.html
|
\---App
index.js
I'll make some assumptions without seeing your project folder structure.我会在没有看到您的项目文件夹结构的情况下做出一些假设。 Looks like it could be your publicPath.
看起来它可能是您的 publicPath。 Unless that's what you intended, the /app folder shouldn't be visible and since your console is showing "localhost:8080/app/bundle.js" that means it's looking for "project-root/src/app/app/bundle.js" instead of "project-root/src/app/bundle.js"
除非这是您的意图,否则 /app 文件夹不应该可见,并且由于您的控制台显示“localhost:8080/app/bundle.js”,这意味着它正在寻找“project-root/src/app/app/bundle.js”。 js”而不是“project-root/src/app/bundle.js”
In the webpack docs they're telling you to default to root '/' and looking at my own webpack file thats what mine is currently set to as well.在 webpack 文档中,他们告诉您默认为 root '/' 并查看我自己的 webpack 文件,这也是我当前设置的。
Reference: https://webpack.js.org/guides/public-path/参考: https : //webpack.js.org/guides/public-path/
Edit: Here's an example using Webpack 3. Version 4 just came out and this will not work, so I'd be careful where you're getting your config examples from if you are using Webpack 4.编辑:这是一个使用 Webpack 3 的示例。版本 4 刚刚发布,这不起作用,所以如果您使用 Webpack 4,我会小心您从哪里获取配置示例。
const webpack = require('webpack'); const path = require('path'); module.exports = { plugins: [ // new webpack.NamedModulesPlugin(), // new webpack.HotModuleReplacementPlugin() ], context: path.join(__dirname, 'src'), entry: [ // 'webpack/hot/dev-server', // 'webpack-hot-middleware/client', // 'babel-polyfill', // 'history', './index.js' ], output: { path: path.join(__dirname, 'www'), filename: 'bundle.js', publicPath: '/' }, module: { loaders: [{ test: /\\.js$/, exclude: /node_modules/, loaders: ['react-hot-loader/webpack', 'babel-loader'] }], resolve: { modules: [ path.join(__dirname, 'node_modules'), ], }, };
after installing安装后
npm init -y
and和
npm install --save-dev webpack webpack-dev-server webpack-cli
and your structure files和你的结构文件
src/
build/
webpack.config.js
package.json
go to package.json, and add build command:转到 package.json,并添加构建命令:
"scripts": {
"start":"webpack serve --mode development",
"build":"webpack"
},
in webpack.config.js在 webpack.config.js 中
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, './src/index.js'),
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js',
},
devServer: {
contentBase: path.resolve(__dirname, './build'),
},
};
so,in your build/index.html所以,在你的 build/index.html
<script type="text/javascript" src="./bundle.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.