CODEWITHSUNDEEP
javascriptreactjswebpackcreate-react-app
LogaKrishnan
LogaKrishnan

Reputation: 501

webpack is not working properly in react.js

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

Upvotes: 2

Views: 5720

Answers (2)

Murilo Cruz
Murilo Cruz

Reputation: 2551

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)

Upvotes: 1

Ikram Ud Daula
Ikram Ud Daula

Reputation: 1321

  1. Git commit the all changes
  2. Run this command on cmd :> npm run eject

  3. 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]',

  4. 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]',

  5. Then restart the server.

  6. Now adding class like that.

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

Upvotes: 1

Related Questions