From 3791761988d79b93a5bfbbb76f6b468c38ed5d30 Mon Sep 17 00:00:00 2001 From: Kameshwaran Date: Tue, 19 Jun 2018 19:47:07 +0530 Subject: [PATCH] Working boilerplate --- .babelrc | 3 +++ .eslintignore | 3 +++ .eslintrc | 18 +++++++++++++++ components/index.js | 0 index.js | 0 package.json | 5 +++++ src/index.html | 12 ++++++++++ src/index.js | 10 +++++++++ webpack.common.js | 53 +++++++++++++++++++++++++++++++++++++++++++++ webpack.config.js | 7 ++++++ 10 files changed, 111 insertions(+) create mode 100644 .babelrc create mode 100644 .eslintignore create mode 100644 .eslintrc delete mode 100644 components/index.js delete mode 100644 index.js create mode 100644 src/index.html create mode 100644 src/index.js create mode 100644 webpack.common.js create mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 00000000..53ba16a5 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["env", "react"] +} \ No newline at end of file diff --git a/.eslintignore b/.eslintignore new file mode 100644 index 00000000..3d44e018 --- /dev/null +++ b/.eslintignore @@ -0,0 +1,3 @@ +dist/ +node_modules/ +webpack.config.js diff --git a/.eslintrc b/.eslintrc new file mode 100644 index 00000000..bfd8d181 --- /dev/null +++ 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 + } +} \ No newline at end of file diff --git a/components/index.js b/components/index.js deleted file mode 100644 index e69de29b..00000000 diff --git a/index.js b/index.js deleted file mode 100644 index e69de29b..00000000 diff --git a/package.json b/package.json index 9d79b11b..a78391e6 100644 --- 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 new file mode 100644 index 00000000..c62affe6 --- /dev/null +++ b/src/index.html @@ -0,0 +1,12 @@ + + + + + + + React and Webpack4 + + +
+ + \ No newline at end of file diff --git a/src/index.js b/src/index.js new file mode 100644 index 00000000..8319dcd7 --- /dev/null +++ b/src/index.js @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +const Index = () => ( +
+ Hello React! +
+); + +ReactDOM.render(, document.getElementById('index')); diff --git a/webpack.common.js b/webpack.common.js new file mode 100644 index 00000000..e3cdccde --- /dev/null +++ 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 new file mode 100644 index 00000000..0007f984 --- /dev/null +++ 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', +});