After build in webpack ReactJS does't work

Question

After webpack command webpack catch all files and finish build in dist folder, but react component doesn't work. I don't understand why. My configs attached:

package.json

{
  "name": "name",
  "version": "1.0.0",
  "description": "Example",
  "main": "index.js",
  "scripts": {
    "watch": "webpack --progress --watch",
    "start": "webpack-dev-server --open",
    "build": "webpack"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.3",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "clean-webpack-plugin": "^0.1.16",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.5.3",
    "optimize-css-assets-webpack-plugin": "^3.1.1",
    "postcss-loader": "^2.0.6",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1"
  },
  "browserslist": [
    "last 15 versions",
    "> 1%",
    "ie 8",
    "ie 7"
  ]
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
entry: ['./app/app.js', './app/sass/app.sass'
],
output: {
    filename: 'app.js',
    path: path.resolve(__dirname, 'dist')
},
devServer: {
    contentBase: './dist'
},
module: {
    rules: [
        {
            test: /\.(js|jsx)$/,
            exclude: /(node_modules)/,
            use: {
                loader: 'babel-loader'
            }
        },
        {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: ["css-loader", "postcss-loader"]
            }),
        },
        {
            test: /\.(sass|scss)$/,
            use: ExtractTextPlugin.extract(['css-loader', 'postcss-loader', 'sass-loader'])
        },
        {
            test: /\.(png|svg|jpg|gif)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: 'img/[name].[ext]', // check the path
                }
            },
        },
        {
            test: /\.(woff|woff2|eot|ttf|otf)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: 'fonts/[name].[ext]', // check the path
                }
            }
        }
    ]
},
plugins: [
    new CleanWebpackPlugin(['dist']),
    new HtmlWebpackPlugin({
        title: 'Build version'
    }),
    new ExtractTextPlugin({
        filename: 'css/app.min.css',
        allChunks: true,
    }),
    new OptimizeCssAssetsPlugin()
]};

babel.rc

{"presets":["es2015", "react"]}

app file system:

• app/
  • components/
  • fonts/
  • img/
  • sass/
  • app.js
  • index.html

index.html has a <div> with id="app" and script with src="app.js" in the body.

Answer 1

Move react and react-dom to dependencies instead of devDependecies in your package.json then try to build again.

Check this answer for an explanation: Bower and devDependencies vs dependencies