React & Webpack：加载失败的<script>源代码 http://localhost:8080/app/bundle.js

Question

我是ReactJ的新手。我尝试使用基本索引页面配置React，包括index.js(包含console.log(((，但是当我尝试运行服务器index.html时显示正确，但bundle.js却没有加载。我经常搜索它，但没有得到适当的答案可以帮助我。

我的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;

错误在控制台中显示：加载失败的源" http：//localhost：8080/app/bundle.js"。

编辑：

添加了文件夹列表。文件夹路径列表音量序列号为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

Answer 1

我将在不看到项目文件夹结构的情况下做一些假设。 看起来可能是您的公共路径。除非您想要的那样，否则不应该看到/应用程序夹，并且由于您的控制台显示" localhost：8080/app/bundle.js"，这意味着它正在寻找" Project-root/src/src/app/app/bundle"。js"而不是" project-root/src/app/bundle.js"

在Webpack文档中，他们告诉您默认为root'/'，然后查看我自己的WebPack文件，这也是当前设置的。

参考：https://webpack.js.org/guides/public-path/

编辑：这是一个使用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'),
        ],
      },
    };

Answer 2

安装

之后

npm init -y 

和

npm install --save-dev webpack webpack-dev-server webpack-cli

和您的结构文件

src/
build/
webpack.config.js
package.json

转到package.json，然后添加构建命令：

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

在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'),
  },
};

所以，在您的build/index.html

中

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