webpack is not working properly in react.js

Question

i have created an "hello-world" react app using create-react-app command, then i tried to run the same files using webpack, but it does not working properly, like .ico, .css files are not rendering to the screen.. please help me to solve this issue.

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  module: {
    rules: [{
      loader: 'babel-loader',
      test: /\.js$/,
      exclude: /node_modules/
    },
    {
      test: /\.css$/,
      exclude: /node_modules/,
      use: [
        {
          loader: 'style-loader'
        },
        {
          loader: 'css-loader',
          options: {
            modules: true,
            // camelCase: true,
            sourceMap: true
          }
        }
      ]
    },
    {
      test: /\.svg$/,
      loaders: [
        'babel-loader',
        {
          loader: 'react-svg-loader',
          query: {
            jsx: true
          }
        },
      ]
    },
    {
      test: /\.json$/,
      loader: 'json-loader',
    },
    {
      test: /\.(jpg|jpeg|gif|png|ico)$/,
      exclude: /node_modules/,
      loader:'file-loader?name=img/[path][name].[ext]&context=./app/images'
   }
  ]
  },
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'public')
  }
};

package.json

{
  "name": "indecision-app",
  "version": "1.0.0",
  "main": "index.js",
  "author": "Andrew Mead",
  "license": "MIT",
  "scripts": {
    "serve": "live-server public/",
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "json-loader": "^0.5.7",
    "live-server": "^1.2.0",
    "react": "15.6.1",
    "react-dom": "15.6.1",
    "react-svg-loader": "^2.1.0",
    "style-loader": "^0.20.3",
    "validator": "8.0.0"
  },
  "devDependencies": {
    "babel-cli": "6.24.1",
    "babel-core": "6.25.0",
    "babel-loader": "7.1.1",
    "babel-preset-env": "1.5.2",
    "babel-preset-react": "6.24.1",
    "css-loader": "^0.28.11",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^2.7.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "2.5.1"
  }
}

index.html

<!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">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <script src="/bundle.js"></script>
  </body>
</html>

.babelrc

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

Remaining file are same as auto-generated while creating create-react-app. help me to solve this issue

Did you eject your CRA?

ChrisR
– ChrisR

2018-04-16 11:47:10 +00:00
Commented Apr 16, 2018 at 11:47 — ChrisR
– ChrisR, Commented Apr 16, 2018 at 11:47
@ChrisR No, how to do that?

LogaKrishnan
– LogaKrishnan

2018-04-16 11:50:08 +00:00
Commented Apr 16, 2018 at 11:50 — LogaKrishnan
– LogaKrishnan, Commented Apr 16, 2018 at 11:50

Murilo Cruz · Accepted Answer · 2018-04-16 12:03:28Z

Well, create-react-app already has his webpack configuration, babel configuration and everything else inside it's own node_modules.

I can see that you changed the start and build commands. The default commands that create-react-app sets here already runs the scripts that calls webpack (with babel and etc), with the correct configuration (that handles the .ico files and everything else)

If you want to deal with it on your own you can eject your create-react-app. This means to throw all config files and scripts on the root of your project and remove the modules that create-react-app installed for you. You can learn more about it here and about the command that ejects the project for you here

If you want to change webpack configurations without ejecting, you can use react-app-rewired. (as I want to keep updates coming from the create-react-app repo, I'm using this alternative)

Ikram Ud Daula · Accepted Answer · 2018-04-16 11:59:17Z

1

Git commit the all changes
Run this command on cmd :> npm run eject
Go generated folder name: config>webpack.config.dev.js>line#166 (approximate) CSS compiler Append the code on options object

importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]',
And also add config>webpack.config.prod.js> line#183 (approximate) css compiler Append the above code on options object

importLoaders: 1,
modules: true,
localIdentName: '[name]__[local]__[hash:base64:5]',
Then restart the server.
Now adding class like that.

import classes from './App.css';
<div className={classes.App}>

answered Apr 16, 2018 at 11:59

Ikram Ud Daula

1,33116 silver badges24 bronze badges

2 Comments

MattSom Over a year ago

Please explain the reasons behind your steps.

Ikram Ud Daula Over a year ago

The reason is base64:5 conversion

Collectives™ on Stack Overflow

webpack is not working properly in react.js

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related