ref: #187 update 09, 11 webpack

Author: lokeeto

hooks/09_Sidebar/webpack.config.js

@@ -34,11 +34,6 @@ module.exports = {
           babelCore: "@babel/core", // needed for Babel v7
         },
       },
-      {
-        test: /\.css$/,
-        include: /node_modules/,
-        use: [MiniCssExtractPlugin.loader, "css-loader"]
-      },
       {
         test: /\.css$/,
         exclude: /node_modules/,

hooks/11_TableAxios/.babelrc

@@ -5,6 +5,9 @@
       {
         "useBuiltIns": "entry"
       }
-    ]
-  ]
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": ["@babel/plugin-transform-runtime"]
 }

hooks/11_TableAxios/package.json

@@ -15,29 +15,33 @@
   "author": "Braulio Diez Botella",
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.2.3",
-    "@babel/core": "^7.2.2",
-    "@babel/polyfill": "^7.2.5",
-    "@babel/preset-env": "^7.3.1",
-    "@types/node": "^11.9.4",
-    "@types/react": "^16.8.3",
-    "@types/react-dom": "^16.8.1",
+    "@babel/cli": "^7.10.5",
+    "@babel/core": "^7.10.5",
+    "@babel/plugin-transform-runtime": "^7.10.5",
+    "@babel/polyfill": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "@babel/preset-react": "^7.10.4",
+    "@babel/preset-typescript": "^7.10.4",
+    "@types/node": "^14.0.24",
+    "@types/react": "^16.9.43",
+    "@types/react-dom": "^16.9.8",
     "awesome-typescript-loader": "^5.2.1",
-    "babel-loader": "^8.0.5",
-    "css-loader": "^2.1.0",
-    "file-loader": "^3.0.1",
-    "html-webpack-plugin": "^3.2.0",
-    "mini-css-extract-plugin": "^0.5.0",
-    "style-loader": "^0.23.1",
-    "typescript": "^3.3.3",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.29.3",
-    "webpack-cli": "^3.2.3",
-    "webpack-dev-server": "^3.1.14"
+    "babel-loader": "^8.1.0",
+    "css-loader": "^3.6.0",
+    "file-loader": "^6.0.0",
+    "html-webpack-plugin": "^4.3.0",
+    "mini-css-extract-plugin": "^0.9.0",
+    "style-loader": "^1.2.1",
+    "typescript": "^3.9.7",
+    "url-loader": "^4.1.0",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
-    "axios": "^0.18.0",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.2"
+    "@babel/runtime": "^7.10.5",
+    "axios": "^0.19.2",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
   }
 }

hooks/11_TableAxios/webpack.config.js

@@ -1,27 +1,27 @@
-var HtmlWebpackPlugin = require("html-webpack-plugin");
-var MiniCssExtractPlugin = require("mini-css-extract-plugin");
-var webpack = require("webpack");
-var path = require("path");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const webpack = require("webpack");
+const path = require("path");
 
-var basePath = __dirname;
+const basePath = __dirname;
 
 module.exports = {
   context: path.join(basePath, "src"),
   resolve: {
-    extensions: [".js", ".ts", ".tsx", ".css"]
+    extensions: [".js", ".ts", ".tsx", ".css"],
   },
   entry: ["@babel/polyfill", "./index.tsx"],
   output: {
     path: path.join(basePath, "dist"),
-    filename: "bundle.js"
+    filename: "bundle.js",
   },
   devtool: "source-map",
   devServer: {
     contentBase: "./dist", // Content base
     inline: true, // Enable watch and live reload
     host: "localhost",
     port: 8080,
-    stats: "errors-only"
+    stats: "errors-only",
   },
   module: {
     rules: [
@@ -31,13 +31,8 @@ module.exports = {
         loader: "awesome-typescript-loader",
         options: {
           useBabel: true,
-          babelCore: "@babel/core" // needed for Babel v7
-        }
-      },
-      {
-        test: /\.css$/,
-        include: /node_modules/,
-        use: [MiniCssExtractPlugin.loader, "css-loader"]
+          babelCore: "@babel/core", // needed for Babel v7
+        },
       },
       {
         test: /\.css$/,
@@ -49,30 +44,31 @@ module.exports = {
             options: {
               modules: true,
               localIdentName: "[name]__[local]___[hash:base64:5]",
-              camelCase: true
-            }
-          }
-        ]
+              camelCase: true,
+            },
+          },
+        ],
       },
       {
         test: /\.(png|jpg|gif|svg)$/,
         loader: "file-loader",
         options: {
-          name: "assets/img/[name].[ext]?[hash]"
-        }
-      }
-    ]
+          name: "assets/img/[name].[ext]?[hash]",
+          esModule: false,
+        },
+      },
+    ],
   },
   plugins: [
     //Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
       filename: "index.html", //Name of file in ./dist/
       template: "index.html", //Name of template in ./src
-      hash: true
+      hash: true,
     }),
     new MiniCssExtractPlugin({
       filename: "[name].css",
-      chunkFilename: "[id].css"
-    })
-  ]
+      chunkFilename: "[id].css",
+    }),
+  ],
 };