用于 React 的 Webpack 不起作用

Question

我刚刚开始使用 React，并且已经完成了 codecademy 课程以及 youtube 上的其他几门课程。我决定配置我的本地机器以进行反应。我已经开始使用 webpack 和 webpack-dev-server。在这里我弄错了。 Here is mistake screenshot

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);

感谢您的帮助。

Answer 1

在您的 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>

Answer 2

我在您的代码中发现了两个问题：

js bundle 的名称在 html 和 webpack 中应该相同——你在 webpack 配置中使用 ready.js 并在你的 html 中使用 bundle.js。
在你的屏幕截图上你有一个错字，webpack 配置的名称是 webpack.congig.js，但它应该是 webpack.config.js（webpack-dev-server 默认使用）

用于 React 的 Webpack 不起作用

Webpack for React doesn`t work

javascript

linux

reactjs

webpack