feat: deploy on netilify

package.json

@@ -33,7 +33,6 @@
     "favicons-webpack-plugin": "6.0.1",
     "html-webpack-plugin": "^5.6.0",
     "postcss-loader": "^8.1.1",
-    "style-loader": "^4.0.0",
     "webpack": "^5.58.2",
     "webpack-assets-manifest": "^5.1.0",
     "webpack-cli": "^4.9.1",

src/App.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const App = () => (
+  <p>test</p>
+)
+
+export default App

src/index.js

@@ -1,4 +1,16 @@
 import React from 'react'
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(<App />);
+
+if ("serviceWorker" in navigator) 
+  navigator.serviceWorker.register("service-worker.js")
+
+/*
+import React from 'react'
 import ReactDOM from 'react-dom'
 //import { Provider } from 'react-redux'
 //import { Client as Styletron } from 'styletron-engine-atomic'
@@ -14,14 +26,14 @@ import './index.css'
 ReactDOM.render(
   <React.StrictMode>
     <p>Test</p>
-    {/*<StyletronProvider value={engine}>
+    <StyletronProvider value={engine}>
       <BaseProvider theme={LightTheme}>
         <Provider store={store}>
           <Root />
         </Provider>
       </BaseProvider>
-</StyletronProvider>*/}
-  </React.StrictMode>,
-  document.getElementById('root')
+    </StyletronProvider>
+</React.StrictMode>,
+document.getElementById('root')
 )
-
+*/

tools/webpack.common.js

@@ -1,21 +1,28 @@
 /* eslint-disable import/no-extraneous-dependencies */
 const path = require('path');
 const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 
 module.exports = {
-  entry: path.resolve(__dirname, '..', 'src/index.js'),
+  entry: path.resolve(process.cwd(), 'src/index.js'),
   module: {
     rules: [
+      {
+        test: /\.m?js$/,
+        resolve: {
+          fullySpecified: false
+        },
+      },
       {
         test: /\.(js|jsx)$/,
         use: 'babel-loader',
         exclude: /node_modules/,
+        resolve: {
+          fullySpecified: false
+        },
       },
       {
         test: /\.css$/,
         use: [
-          'style-loader',
           {
             loader: 'css-loader',
             options: {
@@ -27,6 +34,9 @@ module.exports = {
       },
     ],
   },
+  resolve: {
+    extensions: ['.js', '.jsx'],
+  },
   output: {
     publicPath: '/',
   },
@@ -41,9 +51,5 @@ module.exports = {
       dependenciesCount: 10000,
       percentBy: null,
     }),
-    new HtmlWebpackPlugin({
-      template: path.join(__dirname, '..', 'public/index.html'),
-      filename: path.join(__dirname, '..', 'build/index.html'),
-    }),
   ],
 }

tools/webpack.dev.js

@@ -7,17 +7,17 @@ module.exports = merge({
   mode: 'development',
   devtool: 'inline-source-map',
   output: {
-    publicPath: '/',
+    path: path.resolve(process.cwd(), 'build'),
   },
   plugins: [
     new HtmlWebpackPlugin({
-      template: path.join(__dirname, '..', 'public/index.html'),
-      filename: path.join(__dirname, '..', 'dist/index.html'),
+      template: path.join(process.cwd(), 'public/index.html'),
+      filename: path.join(process.cwd(), 'build/index.html'),
     }),
   ],
   devServer: {
     port: 3001,
-    static: path.join(__dirname, '..', 'public'),
+    static: path.join(process.cwd(), 'public'),
     historyApiFallback: true,
     host: '0.0.0.0',
   },

tools/webpack.prod.js

@@ -2,21 +2,26 @@ const { merge } = require('webpack-merge')
 const path = require('path')
 const WebpackAssetsManifest = require('webpack-assets-manifest')
 const FaviconsWebpackPlugin = require('favicons-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
 const WorkboxPlugin = require('workbox-webpack-plugin')
 const common = require('./webpack.common')
 
 module.exports = merge(common, {
   mode: 'production',
   output: {
     filename: 'static/[name].[contenthash].js',
-    path: path.resolve(__dirname, '..', 'docs'),
+    path: path.resolve(process.cwd(), 'build'),
   },
   optimization: {
     splitChunks: {
       chunks: 'all',
     },
   },
   plugins: [
+    new HtmlWebpackPlugin({
+      template: path.join(process.cwd(), 'public/index.html'),
+      filename: path.join(process.cwd(), 'docs/index.html'),
+    }),
     new FaviconsWebpackPlugin({
       logo: './public/logo.png',
       cache: true,