Skip to content

Commit 5136b09

Browse files
EazybeeEazybee
committed
chore(setup): setup react, webpack, linters
- install webpack, react, css, style, file, loader - install eslint, prettier, husky, lint-staged, babel - configure webpack, eslint, folder structure [Chores setup]
1 parent 2646174 commit 5136b09

14 files changed

+11149
-0
lines changed

‎.eslintignore

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
webpack.config.js
2+
/webpack

‎.eslintrc

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"parser": "babel-eslint",
3+
"extends": ["airbnb-base", "plugin:react/recommended"],
4+
"env": {
5+
"node": true,
6+
"browser": true,
7+
"es6": true
8+
},
9+
"rules": {
10+
"import/no-unresolved": 0
11+
}
12+
}

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/node_modules

‎package-lock.json

+10,920
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
{
2+
"name": "useFormBee",
3+
"version": "1.0.0",
4+
"description": "useFormBee is a custom react hook that helps handle form input, validations and other simiar functionalities",
5+
"main": "src/index.js",
6+
"scripts": {
7+
"lint": "eslint '**/*js'",
8+
"lint:fix": "prettier-eslint '**/*js' --write",
9+
"test": "echo \"Error: no test specified\" && exit 1",
10+
"clean": "rm -rf build",
11+
"start": "npm run clean && webpack-dev-server --env.mode development --open --hot",
12+
"build-dev": "npm run clean && webpack --env.mode development",
13+
"build-prod": "npm run clean && webpack --env.mode production"
14+
},
15+
"dependencies": {
16+
"css-loader": "^3.0.0",
17+
"error-overlay-webpack-plugin": "^0.4.0",
18+
"file-loader": "^4.0.0",
19+
"html-webpack-plugin": "^3.2.0",
20+
"optimize-css-assets-webpack-plugin": "^5.0.3",
21+
"prop-types": "^15.7.2",
22+
"react": "^16.8.6",
23+
"react-dom": "^16.8.6",
24+
"style-loader": "^0.23.1",
25+
"uglifyjs-webpack-plugin": "^2.1.3",
26+
"webpack": "^4.35.2",
27+
"webpack-cli": "^3.3.5",
28+
"webpack-merge": "^4.2.1"
29+
},
30+
"devDependencies": {
31+
"@babel/core": "^7.5.0",
32+
"@babel/node": "^7.5.0",
33+
"@babel/plugin-transform-runtime": "^7.5.0",
34+
"@babel/preset-env": "^7.5.0",
35+
"@babel/preset-react": "^7.0.0",
36+
"babel-eslint": "^10.0.2",
37+
"babel-loader": "^8.0.6",
38+
"eslint": "^6.0.1",
39+
"eslint-config-airbnb": "^17.1.1",
40+
"eslint-loader": "^2.2.1",
41+
"eslint-plugin-import": "^2.18.0",
42+
"eslint-plugin-jsx-a11y": "^6.2.3",
43+
"eslint-plugin-react": "^7.14.2",
44+
"husky": "^3.0.0",
45+
"lint-staged": "^9.1.0",
46+
"path": "^0.12.7",
47+
"prettier-eslint": "^9.0.0",
48+
"prettier-eslint-cli": "^5.0.0",
49+
"webpack-dev-server": "^3.7.2"
50+
},
51+
"husky": {
52+
"hooks": {
53+
"pre-commit": "lint-staged"
54+
}
55+
},
56+
"lint-staged": {
57+
"*.js": [
58+
"eslint --fix",
59+
"git add"
60+
]
61+
},
62+
"repository": {
63+
"type": "git",
64+
"url": "git+https://github.com/Eazybee/Webpack.git"
65+
},
66+
"keywords": [
67+
"webpack",
68+
"react",
69+
"configuration"
70+
],
71+
"author": "Ilori Ezekiel",
72+
"license": "MIT",
73+
"bugs": {
74+
"url": "https://github.com/Eazybee/Webpack/issues"
75+
},
76+
"homepage": "https://github.com/Eazybee/Webpack#readme"
77+
}

‎public/index.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
3+
<html lang="en">
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>useFormBee</title>
7+
<meta name="description" content="" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1" />
9+
</head>
10+
11+
<body>
12+
<!--[if IE]>
13+
<p class="browserupgrade">
14+
You are using an <strong>outdated</strong> browser. Please
15+
<a href="https://browsehappy.com/">upgrade your browser</a> to improve
16+
your experience and security.
17+
</p>
18+
<![endif]-->
19+
<div id="root"></div>
20+
</body>
21+
</html>

‎src/.DS_Store

6 KB
Binary file not shown.

‎src/components/app.jsx

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import React from 'react';
2+
import '../styles/app.css';
3+
4+
const App = () => (<h1>Hello useFormBee!</h1>);
5+
6+
export default App;

‎src/index.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import React from 'react';
2+
import ReactDom from 'react-dom';
3+
import App from './components/app';
4+
5+
ReactDom.render(<App />, document.getElementById('root'));

‎src/styles/app.css

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
}
5+
6+
h1{
7+
background: papayawhip;
8+
color: tomato;
9+
height: 100vh;
10+
text-align: center;
11+
font-size: 4em;
12+
padding: 25% 0;
13+
}

‎webpack.config.js

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
const webpackMerge = require('webpack-merge');
2+
const commonConfig = require('./webpack/common');
3+
4+
module.exports = env => {
5+
let envConfig;
6+
!env.mode
7+
? (envConfig = require(`./webpack/development`))
8+
: (envConfig = require(`./webpack/${env.mode}`))
9+
10+
console.log(env);
11+
return webpackMerge({ mode: env.mode }, commonConfig, envConfig);
12+
};

‎webpack/common.js

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
const webpack = require('webpack');
2+
const path = require('path');
3+
const HtmlWebpackPlugin = require('html-webpack-plugin');
4+
5+
module.exports = {
6+
entry: path.join(__dirname, '../src', 'index.js'),
7+
output: {
8+
path: path.join(__dirname, '../build'),
9+
filename: '[name].bundle.js',
10+
publicPath: '/',
11+
},
12+
resolve: {
13+
modules: [path.resolve(__dirname, '../src'), 'node_modules'],
14+
extensions: ['*', '.js', '.jsx', '.css'],
15+
alias: {
16+
'<src>': path.resolve(__dirname, '../src'),
17+
},
18+
},
19+
plugins: [
20+
new webpack.ProgressPlugin(),
21+
new HtmlWebpackPlugin({
22+
template: path.join(__dirname, '../public', 'index.html'),
23+
inject: 'body'
24+
})
25+
],
26+
module: {
27+
rules: [
28+
{
29+
test: /\.(js|jsx)$/,
30+
exclude: /node_modules/,
31+
use: {
32+
loader: 'babel-loader',
33+
options: {
34+
presets: ['@babel/preset-env', '@babel/preset-react'],
35+
plugins: [
36+
'@babel/plugin-transform-runtime',
37+
]
38+
}
39+
},
40+
},
41+
{
42+
test: /\.css$/,
43+
use: ['style-loader', 'css-loader'],
44+
},
45+
{
46+
test: /\.(jpg|jpeg|png|gif|mp3|svg)$/,
47+
loaders: ['file-loader'],
48+
},
49+
]
50+
}
51+
};

‎webpack/development.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
const ErrorOverlayPlugin = require('error-overlay-webpack-plugin');
2+
3+
module.exports = {
4+
devServer: {
5+
historyApiFallback: true,
6+
port: 8000
7+
},
8+
plugins: [new ErrorOverlayPlugin()],
9+
};

‎webpack/production.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
2+
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
3+
4+
module.exports = {
5+
devtool: 'source-map',
6+
performance: {
7+
hints: false,
8+
},
9+
optimization: {
10+
minimizer: [
11+
new UglifyJsPlugin({
12+
test: /\.(js|jsx)$/,
13+
exclude: /node_modules/,
14+
cache: true,
15+
parallel: true,
16+
}),
17+
new OptimizeCSSAssetsPlugin({})
18+
]
19+
},
20+
};

0 commit comments

Comments
 (0)