个人中心
gpt4 book ai didi

javascript - 在 React App 中找不到 bundle.js 页面

转载 作者：行者123 更新时间：2023-11-30 20:32:37 27 4
gpt4 key购买 nike

bundle.js 页面未找到错误，我将脚本标记添加到 index.html 文件。在 webpack.config.js 文件中，设置输出路径为 

output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'bundle.js',
    },

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>

</body>
</html>

AppContainer.jsx

'use strict';
import React, {Component} from 'react';

export default class AppContainer extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return <div>
            <h2>Hello World</h2>
        </div>;
    }
}

webpack.config.js

 'use strict';
     const path = require('path');

module.exports = {
    entry: path.resolve(__dirname, "app.jsx"),
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["env", "react"]
                    }
                }
            }
        ]
    },
    resolve: {
        extensions: [".js", ".jsx"]
    },
    devServer: {
        contentBase: path.join(__dirname, "/"),
        compress: true
    },
    devtool: "source-map"
};

App.jsx

'use strict';
import React from 'react';

import AppContainer from './AppContainer.jsx';

render(<AppContainer/>, document.getElementById('app'));

这是我的 React 存储库链接:react link description here

最佳答案

不是您问题的直接答案，但也许您可以尝试 HtmlWebpackPlugin ？它会自动为您生成 HTML 并在脚本中正确链接您的包。

运行 npm i --save-dev html-webpack-plugin，并设置:

const HtmlWebpackPlugin = require('html-webpack-plugin')
const path = require('path');

module.exports = {
  entry: path.resolve(__dirname, "app.jsx"),
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    publicPath: '/'  // not sure if that will make any difference though
  },
  plugins: [
    new HtmlWebpackPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["env", "react"]
          }
        }
      }
    ]
  },
  resolve: {
    extensions: [".js", ".jsx"]
  },
  devServer: {
    contentBase: path.join(__dirname, "/"),
    compress: true
  },
  devtool: "source-map"
};

关于javascript - 在 React App 中找不到 bundle.js 页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50179124/

27 4 0
文章推荐： c# - 在数据模板中绑定(bind)命令 (XF/Prism)
文章推荐： c - 使用 gcc 编译器了解 Linux 中 C 语言中的指针
文章推荐： c# - 无法通过一个查询使用 Include 或 ThenInclude 或 Select/Many 加载相关数据
文章推荐： javascript - 为数组中的每个元素执行ajax
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com