javascript - React & Webpack: Loading failed for the <script> with source http:localhost:8080appbundle.js

I am new in reactjs. I tried to configure react with basic index page including index.js(containing a c

I am new in 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. I search it a lot but not getting proper answer can any one help me please.

my webpack.config.js is

    // 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”.

Edit:

Folder Listing added.. Folder PATH listing Volume serial number is 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 am new in 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. I search it a lot but not getting proper answer can any one help me please.

my webpack.config.js is

    // 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”.

Edit:

Folder Listing added.. Folder PATH listing Volume serial number is 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
Share Improve this question edited Mar 25, 2018 at 6:23 Subhendu Mondal asked Mar 25, 2018 at 5:31 Subhendu MondalSubhendu Mondal 1311 gold badge1 silver badge9 bronze badges 8
  • can you please share the whole public path. In what folder is you bundle created ? – Gardezi Commented Mar 25, 2018 at 6:23
  • I added the root directory tree in my edited question. – Subhendu Mondal Commented Mar 25, 2018 at 6:26
  • provide the public path like this dist or dist/app and get back to me with the results – Gardezi Commented Mar 25, 2018 at 6:30
  • My edited config is publicPath: "dist\\app\\", but problem is on and i use dist as publicPath too nothing changes. – Subhendu Mondal Commented Mar 25, 2018 at 6:35
  • You have to do the saame path to give the folder name here. Here I think if you have dist as your public path dist with e in path and dist/app is the public path then I think app will be the path – Gardezi Commented Mar 25, 2018 at 6:53
 |  Show 3 more ments

2 Answers 2

Reset to default 1

I'll make some assumptions without seeing your project folder structure. Looks like it could be your 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"

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.

Reference: https://webpack.js/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.

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 mand:

"scripts": {
    "start":"webpack serve --mode development",
    "build":"webpack"
  },

in 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

<script type="text/javascript" src="./bundle.js"></script>

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745450163a4628230.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信