chanakasan/a-react-boilerplate-1.md

## a-react-boilerplate-1.md

      
    Raw
  

              a-react-boilerplate-1.md
            
          
    react-boilerplate-1


## babelrc
{
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false
      }
    ],
    '@babel/preset-react'
  ],
  plugins: [
    'react-hot-loader/babel'
  ]
}

## package.json
{
  "name": "chk-react-boilerplate-1",
  "version": "1.0.0",
  "private": true,
  "license": "Apache-2.0",
  "scripts": {
    "build": "NODE_ENV=production webpack -p",
    "start": "webpack-dev-server --hot"
  },
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-hot-loader": "^4.12.21",
    "lodash": "^4.17.15"
  },
  "devDependencies": {
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "@babel/core": "^7.9.6",
    "@babel/preset-env": "^7.9.6",
    "@hot-loader/react-dom": "^16.13.0+4.12.20",
    "webpack-dev-server": "^3.11.0",
    "copy-webpack-plugin": "^6.0.1",
    "html-webpack-plugin": "^4.3.0",
    "lodash-webpack-plugin": "^0.11.5",
    "clean-webpack-plugin": "^3.0.0",
    "file-loader": "^6.0.0",
    "url-loader": "^4.1.0",
    "webpack-bundle-analyzer": "^3.8.0"
  }
}

## src-index.js
import React from "react";
import ReactDOM from "react-dom";
import Root from "./root";

var mountNode = document.getElementById("root");
ReactDOM.render(<Root />, mountNode);

## src-main.tpl
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width, viewport-fit=cover">
  <title><%= htmlWebpackPlugin.options.title %></title>
  <!-- NOTE: css is injected by webpack as <style> tags -->
</head>
<body>
  <div id="root"></div>
  <!-- NOTE: bundle.js is injected by webpack-->
</body>
</html>

## src-root.js
import React from "react"
import { hot } from 'react-hot-loader/root'

import App from './app'

const Root = () => (
  <App />
)

export default hot(Root)

## webpack.config.js
const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const nodeEnv = process.env.NODE_ENV

const config = {
  mode: (nodeEnv === 'production' ? 'production' : 'development'),
  entry: [
    'react-hot-loader/patch',
    './src/index.js'
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.svg$/,
        use: 'file-loader'
      },
      {
        test: /\.png$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              mimetype: 'image/png'
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.jsx'
    ],
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  },
  devServer: {
    contentBase: './dist'
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Loading...',
      template: 'src/index.tpl',
    }),
    new LodashModuleReplacementPlugin,
    new CleanWebpackPlugin(),
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      openAnalyzer: false,
    })
  ],
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }
      }
    }
  }
};

module.exports = (env, argv) => {
  if (argv.hot) {
    // Cannot use 'contenthash' when hot reloading is enabled.
    config.output.filename = '[name].[hash].js';
  }

  console.log("[DEBUG] nodeEnv =", nodeEnv)
  console.log("[DEBUG] config.mode =", config.mode)

  return config;
};
	{
	presets: [
	[
	'@babel/preset-env',
	{
	modules: false
	}
	],
	'@babel/preset-react'
	],
	plugins: [
	'react-hot-loader/babel'
	]
	}
	{
	"name": "chk-react-boilerplate-1",
	"version": "1.0.0",
	"private": true,
	"license": "Apache-2.0",
	"scripts": {
	"build": "NODE_ENV=production webpack -p",
	"start": "webpack-dev-server --hot"
	},
	"dependencies": {
	"react": "^16.13.1",
	"react-dom": "^16.13.1",
	"react-hot-loader": "^4.12.21",
	"lodash": "^4.17.15"
	},
	"devDependencies": {
	"webpack": "^4.43.0",
	"webpack-cli": "^3.3.11",
	"@babel/preset-react": "^7.9.4",
	"babel-loader": "^8.1.0",
	"@babel/core": "^7.9.6",
	"@babel/preset-env": "^7.9.6",
	"@hot-loader/react-dom": "^16.13.0+4.12.20",
	"webpack-dev-server": "^3.11.0",
	"copy-webpack-plugin": "^6.0.1",
	"html-webpack-plugin": "^4.3.0",
	"lodash-webpack-plugin": "^0.11.5",
	"clean-webpack-plugin": "^3.0.0",
	"file-loader": "^6.0.0",
	"url-loader": "^4.1.0",
	"webpack-bundle-analyzer": "^3.8.0"
	}
	}
	import React from "react";
	import ReactDOM from "react-dom";
	import Root from "./root";

	var mountNode = document.getElementById("root");
	ReactDOM.render(<Root />, mountNode);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device-width, viewport-fit=cover">
	<title><%= htmlWebpackPlugin.options.title %></title>
	<!-- NOTE: css is injected by webpack as <style> tags -->
	</head>
	<body>
	<div id="root"></div>
	<!-- NOTE: bundle.js is injected by webpack-->
	</body>
	</html>
	import React from "react"
	import { hot } from 'react-hot-loader/root'

	import App from './app'

	const Root = () => (
	<App />
	)

	export default hot(Root)
	const webpack = require('webpack');
	const path = require('path');
	const HtmlWebpackPlugin = require('html-webpack-plugin');
	const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
	const { CleanWebpackPlugin } = require('clean-webpack-plugin');
	const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

	const nodeEnv = process.env.NODE_ENV

	const config = {
	mode: (nodeEnv === 'production' ? 'production' : 'development'),
	entry: [
	'react-hot-loader/patch',
	'./src/index.js'
	],
	output: {
	path: path.resolve(__dirname, 'dist'),
	filename: '[name].[contenthash].js'
	},
	module: {
	rules: [
	{
	test: /\.(js\|jsx)$/,
	use: 'babel-loader',
	exclude: /node_modules/
	},
	{
	test: /\.svg$/,
	use: 'file-loader'
	},
	{
	test: /\.png$/,
	use: [
	{
	loader: 'url-loader',
	options: {
	mimetype: 'image/png'
	}
	}
	]
	}
	]
	},
	resolve: {
	extensions: [
	'.js',
	'.jsx'
	],
	alias: {
	'react-dom': '@hot-loader/react-dom'
	}
	},
	devServer: {
	contentBase: './dist'
	},
	plugins: [
	new HtmlWebpackPlugin({
	title: 'Loading...',
	template: 'src/index.tpl',
	}),
	new LodashModuleReplacementPlugin,
	new CleanWebpackPlugin(),
	new BundleAnalyzerPlugin({
	analyzerMode: 'static',
	openAnalyzer: false,
	})
	],
	optimization: {
	runtimeChunk: 'single',
	splitChunks: {
	cacheGroups: {
	vendor: {
	test: /[\\/]node_modules[\\/]/,
	name: 'vendors',
	chunks: 'all'
	}
	}
	}
	}
	};

	module.exports = (env, argv) => {
	if (argv.hot) {
	// Cannot use 'contenthash' when hot reloading is enabled.
	config.output.filename = '[name].[hash].js';
	}

	console.log("[DEBUG] nodeEnv =", nodeEnv)
	console.log("[DEBUG] config.mode =", config.mode)

	return config;
	};