webpack-app basic done

ajeetshah · ajeetshah · commit ddd122937124 · 2022-01-22T23:30:53.000+05:30
diff --git a/packages/webpack-app/.babelrc b/packages/webpack-app/.babelrc
@@ -1,7 +1,7 @@
 {
-    "presets": ["@babel/preset-env", "@babel/preset-react"],
-    "plugins": [
-      "@babel/plugin-syntax-dynamic-import",
-      "@babel/plugin-proposal-class-properties"
-    ]
-  }
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
+  "plugins": [
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-proposal-class-properties"
+  ]
+}
diff --git a/packages/webpack-app/package.json b/packages/webpack-app/package.json
@@ -5,6 +5,9 @@
   "main": "index.js",
   "license": "MIT",
   "private": true,
+  "scripts": {
+    "start": "webpack-dev-server"
+  },
   "dependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
diff --git a/packages/webpack-app/public/favicon.ico b/packages/webpack-app/public/favicon.ico
diff --git a/packages/webpack-app/public/index.html b/packages/webpack-app/public/index.html
@@ -0,0 +1,16 @@
+<!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">
+  </link>
+  <title>webpack-for-react</title>
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>
diff --git a/packages/webpack-app/src/App.js b/packages/webpack-app/src/App.js
@@ -0,0 +1,7 @@
+import React from 'react'
+
+const App = () => {
+  return <div>Hello React and Webpack</div>
+}
+
+export default App
diff --git a/packages/webpack-app/src/index.js b/packages/webpack-app/src/index.js
@@ -0,0 +1,5 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+ReactDOM.render(<App />, document.getElementById('root'))
diff --git a/packages/webpack-app/webpack.config.js b/packages/webpack-app/webpack.config.js
@@ -0,0 +1,50 @@
+const webpack = require('webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+
+const port = process.env.PORT || 3000
+
+module.exports = {
+  mode: 'development',
+  entry: './src/index.js',
+  output: {
+    filename: 'bundle.[hash].js',
+  },
+  devtool: 'inline-source-map',
+  module: {
+    rules: [
+      {
+        test: /\.(js)$/,
+        exclude: /node_modules/,
+        use: ['babel-loader'],
+      },
+      {
+        test: /\.css$/,
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              localsConvention: 'camelCase',
+              sourceMap: true,
+            },
+          },
+        ],
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: 'public/index.html',
+      favicon: 'public/favicon.ico',
+    }),
+  ],
+  devServer: {
+    host: 'localhost',
+    port: port,
+    historyApiFallback: true,
+    open: true,
+  },
+}
