Project setup with Webpack, Babel, Prettier and ESLint

zoltantothcom · zoltantothcom · commit 65b36c985bb3 · 2019-01-30T13:12:04.000-05:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-env", "@babel/preset-react"]
+}
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,17 @@
+{
+  "parser": "babel-eslint",
+  "extends": "react",
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "indent": ["error", 2],
+    "space-before-function-paren": ["off"]
+  }
+}
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,6 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "bracketSpacing": true
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>My React Configuration Setup</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="./dist/bundle.js"></script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -6,6 +6,24 @@
     "react": "^16.7.0",
     "react-dom": "^16.7.0"
   },
-  "scripts": {},
-  "devDependencies": {}
+  "scripts": {
+    "start": "webpack-dev-server --mode development",
+    "format": "prettier --write \"src/**/*.js\"",
+    "build": "webpack --mode production"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.2.2",
+    "@babel/preset-env": "^7.3.1",
+    "@babel/preset-react": "^7.0.0",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.5",
+    "eslint": "^5.12.1",
+    "eslint-config-react": "^1.1.7",
+    "eslint-loader": "^2.1.1",
+    "eslint-plugin-react": "^7.12.4",
+    "prettier": "1.16.2",
+    "webpack": "^4.29.0",
+    "webpack-cli": "^3.2.1",
+    "webpack-dev-server": "^3.1.14"
+  }
 }
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class Welcome extends React.Component {
+  render() {
+    return <h1>Hello World</h1>;
+  }
+}
+
+ReactDOM.render(<Welcome />, document.getElementById('root'));
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,24 @@
+const path = require('path');
+
+module.exports = {
+  devtool: 'inline-source-map',
+  entry: './src/index.js',
+  output: {
+    path: path.join(__dirname, '/dist'),
+    publicPath: '/',
+    filename: 'bundle.js'
+  },
+  devServer: {
+    contentBase: './',
+    publicPath: '/dist/'
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader', 'eslint-loader']
+      }
+    ]
+  }
+};
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "presets": ["@babel/preset-env", "@babel/preset-react"]`
	`3`	`+}`