Kirill Stas Kirill Stas - 1 month ago 17
Linux Question

Webpack for React doesn`t work

I am just start React and have finished

codecademy
courses and several other on youtube. I decide to configure my local machine for react. I ve started with webpack & webpack-dev-server. And here I get mistake.
Here is mistake screenshot

Also Here is my files tree

Here is my 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()
]
};


My index.html:

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


And index.js:

let message = 'Hello from entry message';

console.log(message);


Thanks for any help.

Answer

I see two issues in your code:

  1. The name of js bundle should be the same in html and in webpack – you use ready.js in webpack config and bundle.js in your html.
  2. On your screenshot you have a typo and name of webpack config is webpack.congig.js, but it should be webpack.config.js (that is used by default by webpack-dev-server)
Comments