Javascript 在react应用程序中找不到bundlel.js页面_Javascript_Reactjs

Javascript 在react应用程序中找不到bundlel.js页面

javascript reactjs

Javascript 在react应用程序中找不到bundlel.js页面,javascript,reactjs,Javascript,Reactjs,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

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>

App.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>;
    }
}

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

import AppContainer from './AppContainer.jsx';

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

“严格使用”；
从“React”导入React；
从“./AppContainer.jsx”导入AppContainer；
render（
不是对您的问题的直接回答，但也许您可以试一试？它将自动为您生成HTML，并在脚本中正确链接您的包
运行npm i--save dev html网页包插件

，并设置：

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"
};

你的

index.html

文件在哪里？bundle.jssrc应该与它存在的位置相对应。因此，如果它们都在

dist

中，请将你的src更改为

/bundle.js

。否则，你需要先转到

/dist

并在那里引用它。

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"
};