Webpack for React不起作用

Webpack for React doesn`t work

本文关键字：不起作用 React for Webpack      更新时间：2023-09-26

我刚开始学习React，已经在youtube上完成了codecademy课程和其他几个课程。我决定为react配置本地机器。我从webpack &webpack-dev-server。这里我错了。下面是错误截图

Also Here is my files tree

这是我的webpack.config.js:

var webpack = require('webpack');
var path = require('path');
module.exports = {
    devtool: 'inline-source-map',
    entry: [
        'webpack-dev-server/client?http://127.0.0.1:8080/',
        'webpack/hot/only-dev-server',
        './src'
    ],
    output: {
           path: path.join(__dirname, 'public'),
           filename: "bundle.js"
    },
    resolve: {
        modulesDirectories: ['node_modules', 'src'],
        extensions: ['', '.js']
    },
    module: {
        loader: [
        {
            test: /'.jsx?$/,
            exclude: /node_modules/,
            loaders: ['react-hot', 'babel?presets[]=react,presets[]=es2015']
        }
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]
};

我的index . html。

<!DOCTYPE html>
<html>
<head>
    <title>React ToDos App</title>
</head>
<body>
    <div id="app" />
    <script src="bundle.js"></script>
</body>
</html>

和index.js: 

let message = 'Hello from entry message';
console.log(message);

谢谢你的帮助

我在你的代码中看到两个问题:

  1. js包的名称应该在html和webpack中是相同的-你使用ready.js在webpack配置和bundle.js在你的html。
    2. 在你的屏幕截图中，你有一个错字，webpack配置的名称是webpack.congig.js，但它应该是webpack.config.js(这是webpack-dev-server默认使用的)

在您的webpack配置中，您将输出filename设置为ready.js，并在您的HTML中寻找bundle.js。这就是产生错误的原因。在这两个地方用相同的名字

 <!DOCTYPE html>
<html>
<head>
    <title>React ToDos App</title>
</head>
<body>
    <div id="app" />
    <script src="ready.js"></script>
</body>
</html>
相关文章：