Setup webpack for react project

Question

I'm new to react and webpack. I have a very simple react project and tried to load it using webpack, but it shows only public/index.html file. None of my components are loading.

I've added some packages like

babel-core,babel-loader,babel-preset-es2015,babel-preset-react,css-loader,webpack

to devDependencies

and here is my webpack config file

/*
    ./webpack.config.js
*/
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './public/index.html',
  filename: 'index.html',
  inject: false
})

var ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve('dist'),
    filename: 'index_bundle.js'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]},
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: ['file-loader?context=src/images&name=images/[path][name].[ext]', {
          loader: 'image-webpack-loader',
          query: {
            mozjpeg: {
              progressive: true,
            },
            gifsicle: {
              interlaced: false,
            },
            optipng: {
              optimizationLevel: 4,
            },
            pngquant: {
              quality: '75-90',
              speed: 3,
            },
          },
        }],
        exclude: /node_modules/,
        include: __dirname,
      }
    ]
  },
  plugins: [
    HtmlWebpackPluginConfig,
    new ManifestPlugin()
  ]
}

here is my src/index.js file

import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './App';
import registerServiceWorker from './registerServiceWorker';

render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'));
registerServiceWorker();

and here is my html file

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->

    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

and here is my console log after start

yarn start
yarn run v1.2.1
$ webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /
Hash: 8af99359537f6384fd41
Version: webpack 3.8.1
Time: 3425ms
                            Asset       Size  Chunks                    Chunk Names
images/_/components/Home/back.png    24.4 kB          [emitted]
                  index_bundle.js    1.41 MB       0  [emitted]  [big]  main
                       index.html    1.52 kB          [emitted]
                    manifest.json  114 bytes          [emitted]
   [0] ./node_modules/react/index.js 190 bytes {0} [built]
  [29] ./node_modules/react-router-dom/es/index.js 925 bytes {0} [built]
  [39] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js 40 bytes {0} [built]
  [40] (webpack)-dev-server/client?http://localhost:8080 7.95 kB {0} [built]
  [41] ./node_modules/url/url.js 23.3 kB {0} [built]
  [48] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [50] ./node_modules/loglevel/lib/loglevel.js 7.74 kB {0} [built]
  [51] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
  [53] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  [58] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [60] (webpack)/hot/emitter.js 75 bytes {0} [built]
  [62] ./src/index.js 723 bytes {0} [built]
  [65] ./node_modules/react-dom/index.js 1.36 kB {0} [built]
 [104] ./src/App.js 2.52 kB {0} [built]
 [117] ./src/registerServiceWorker.js 4.03 kB {0} [built]
    + 103 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html 1.92 kB {0} [built]
       [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/global.js 488 bytes {0} [built]
       [3] (webpack)/buildin/module.js 495 bytes {0} [built]
webpack: Compiled successfully.

main.bundle.js you mean? should I manually do that ? or is there a way to include it automatically ? — Mini
I would recommend you to use "create-react-app" to avoid configuration problems github.com/facebook/create-react-app — Islam Murtazaev

Unknown Unknown · Accepted Answer · 2017-11-03T19:29:39

Your are not including the script webpack generates for you in the html file.

At its most simple form, webpack requires an entry, and an output.

How about we look at a simpler example to learn how webpack works like so:

webpack.config.js

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  }
};

index.html

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

Try to run webpack and launch your index.html file manually, once that goes through run webpack-dev-server.

Setup webpack for react project

2 Answers