How do we run react js production code on local using webpack?

Question

I'm trying to run my ReactJS production code in local using webpack. Can anyone check on my setup, please?

webpack.config.js

 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: path.join(__dirname,'src','index.js'),
  output: {
    path: path.join(__dirname,'dist'),
    filename: 'index.bundle.js'
  },
  mode: process.env.NODE_ENV || 'development',
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules']
  },
  devServer: {
    contentBase: path.join(__dirname,'src'),
    //host: '00.00.00.0',//your ip address
    port: 4201,
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        // we do not want anything from node_modules to be compiled
        exclude: /node_modules/,
        use: ['babel-loader']
      },
      {
        test: /\.html$/,
        use: [{loader: "html-loader"}]
      },
      {
        test: /\.(css|scss)$/,
        use: [
          "style-loader", // creates style nodes from JS strings
          "css-loader", // translates CSS into CommonJS
          "sass-loader" // compiles Sass to CSS, using Node Sass by default
        ]
      },
      { 
        test: /\.json$/, loader: "json-loader" 
      },
      {
        test: /\.(ttf|eot|woff|woff2|jpg|jpeg|png|gif|mp3|svg|ico)$/,
        loaders: ['file-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname,'src','index.html')
    })
  ]
};

when I run npm run build, the process appears to execute correctly (creates build folder, which contains the bundled js file and the index.html file)

package.json

{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "babel-node ./node_modules/webpack/bin/webpack",
    "_start": "babel-node ./node_modules/webpack-dev-server/bin/webpack-dev-server --open",
    "start": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/node": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.4.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.11.0",
    "path": "^0.12.7",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  },
  "dependencies": {
    "@coreui/coreui": "^2.1.12",
    "@coreui/coreui-plugin-chartjs-custom-tooltips": "^1.3.1",
    "@coreui/icons": "0.3.0",
    "@coreui/react": "^2.5.1",
    "bootstrap": "^4.3.1",
    "moment": "^2.24.0",
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-config": "^5.0.1",
    "react-router-dom": "^5.0.1",,
    "underscore": "^1.9.1"
  }
}

I'm new to react and webpack. I have a very simple react project and tried to run it using webpack in local. But unable to resolve.

Carlos Crespo Carlos Crespo · Accepted Answer · 2019-11-07T11:30:37

Try running NODE_ENV=product yarn start, I don't know what scripts you have in your packages.json, but setting the NODE_ENV=production before running the script is what you need

edit:

In your case, I would change your packages.json. because by default your webpack will run in development mode if you don't change the NODE_ENV

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "webpack": "babel-node ./node_modules/webpack/bin/webpack",
    "_start": "babel-node ./node_modules/webpack-dev-server/bin/webpack-dev-server --open",
    "start": "webpack-dev-server",
    "build": "webpack --mode production"
  },

Then this NODE_ENV=product yarn start will definitely work

How do we run react js production code on local using webpack?

3 Answers