Kirill Stas Kirill Stas - 1 year ago 111
Linux Question

Webpack for React doesn`t work

I am just start React and have finished

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: [
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>
<title>React ToDos App</title>
<div id="app" />
<script src="bundle.js"></script>

And index.js:

let message = 'Hello from entry message';


Thanks for any help.

Answer Source

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)
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download