我刚刚开始 React，并完成了 codecademy 类(class)和 youtube 上的其他几门类(class)。我决定配置我的本地机器以进行 react 。我已经开始使用 webpack 和 webpack-dev-server。在这里我弄错了。
Here is mistake screenshot
这是我的 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);
感谢您的帮助。
最佳答案
我在您的代码中发现了两个问题:
- js bundle 的名称在 html 和 webpack 中应该相同——您在 webpack 配置中使用
ready.js并在 html 中使用bundle.js。< - 在您的屏幕截图中，您有一个错字，webpack 配置的名称是
webpack.congig.js，但它应该是webpack.config.js(由默认为 webpack-dev-server)
关于javascript - 用于 React 的 Webpack 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40090321/