gpt4 book ai didi

javascript - 用于 React 的 Webpack 不起作用

转载 作者:太空宇宙 更新时间:2023-11-04 10:30:43 26 4
gpt4 key购买 nike

我刚刚开始 React,并完成了 codecademy 类(class)和 youtube 上的其他几门类(class)。我决定配置我的本地机器以进行 react 。我已经开始使用 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);

感谢您的帮助。

最佳答案

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

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

关于javascript - 用于 React 的 Webpack 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40090321/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com