Working boilerplate

Kameshwaran · Kameshwaran · commit 3791761988d7 · 2018-06-19T19:47:07.000+05:30
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["env", "react"]
+}
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,3 @@
+dist/
+node_modules/
+webpack.config.js
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,18 @@
+{
+  "parser": "babel-eslint",
+  "extends": "airbnb",
+  "rules": {
+    "react/jsx-filename-extension": 0
+  },
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": [
+    "react"
+  ],
+  "env": {
+    "browser": true
+  }
+}
diff --git a/components/index.js b/components/index.js
diff --git a/index.js b/index.js
diff --git a/package.json b/package.json
@@ -3,6 +3,11 @@
   "version": "1.0.0",
   "description": "A set of React UI components",
   "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server --mode development --open --hot",
+    "build": "webpack --mode production --config webpack.prod.js",
+    "lint": "eslint ./ --ext .jsx --ext .js"
+  },
   "repository": "https://github.com/Codebrahma/React-Lite-UI.git",
   "license": "ISC",
   "private": false,
diff --git a/src/index.html b/src/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>React and Webpack4</title>
+</head>
+  <body>
+    <section id="index"></section>
+  </body>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const Index = () => (
+  <div>
+    Hello React!
+  </div>
+);
+
+ReactDOM.render(<Index />, document.getElementById('index'));
diff --git a/webpack.common.js b/webpack.common.js
@@ -0,0 +1,53 @@
+const HtmlWebPackPlugin = require("html-webpack-plugin");
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+
+const devMode = process.env.NODE_ENV !== 'production';
+const htmlWebpackPlugin = new HtmlWebPackPlugin({
+  template: "./src/index.html",
+  filename: "./index.html"
+});
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader"
+        }
+      },
+      {
+        test: /\.jsx$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader"
+        }
+      },
+      {
+        test: /\.css$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          "css-loader"
+        ]
+      },
+      {
+        test: /\.s?[ac]ss$/,
+        use: [
+           devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
+           'css-loader',
+           'sass-loader',
+        ],
+      },
+    ]
+  },
+  plugins: [
+    htmlWebpackPlugin,
+    //new BundleAnalyzerPlugin(),
+    new MiniCssExtractPlugin({
+      filename: devMode ? '[name].css' : '[name].[hash].css',
+      chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
+    })
+  ]
+};
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,7 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+   devtool: 'inline-source-map',
+   mode: 'development',
+});

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "presets": ["env", "react"]`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+dist/`
	`2`	`+node_modules/`
	`3`	`+webpack.config.js`