Upgrade & simplify webpack example (#343)

* (webpack) - upgrade webpack example packages * (webpack) - simplify webpack example config * (webpack) - simplify webpack example counter
preactjs · May 12, 2021 · 34ff2b4 · 34ff2b4
1 parent 3303bed
commit 34ff2b4
Show file tree

Hide file tree

Showing 6 changed files with 1,355 additions and 1,646 deletions.
diff --git a/packages/webpack/example/.babelrc.js b/packages/webpack/example/.babelrc.js
@@ -2,12 +2,9 @@ module.exports = {
   presets: ['@babel/preset-env'],
   plugins: [
     '@prefresh/babel-plugin',
-    [
-      '@babel/plugin-transform-react-jsx',
-      {
-        pragma: 'h',
-        pragmaFrag: 'Fragment',
-      },
-    ],
+    ['@babel/plugin-transform-react-jsx', {
+      pragma: 'h',
+      pragmaFrag: 'Fragment',
+    }],
   ],
 };
diff --git a/packages/webpack/example/package.json b/packages/webpack/example/package.json
@@ -17,18 +17,18 @@
   },
   "homepage": "https://github.com/JoviDeCroock/preact-boilerplate#readme",
   "devDependencies": {
-    "@babel/core": "^7.8.4",
-    "@babel/plugin-transform-react-jsx": "^7.8.3",
-    "@babel/preset-env": "^7.8.4",
-    "@prefresh/babel-plugin": "0.2.2",
-    "@prefresh/webpack": "^2.2.1",
+    "@babel/core": "^7.14.0",
+    "@babel/plugin-transform-react-jsx": "^7.13.12",
+    "@babel/preset-env": "^7.14.1",
+    "@prefresh/babel-plugin": "^0.4.1",
+    "@prefresh/webpack": "^3.2.3",
     "babel-loader": "^8.2.2",
-    "html-webpack-plugin": "^4.5.0",
-    "webpack": "^5.10.0",
-    "webpack-cli": "^4.2.0",
-    "webpack-dev-server": "^3.11.0"
+    "html-webpack-plugin": "^5.3.1",
+    "webpack": "^5.37.0",
+    "webpack-cli": "^4.7.0",
+    "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
-    "preact": "^10.5.7"
+    "preact": "^10.5.13"
   }
 }
diff --git a/packages/webpack/example/src/App.js b/packages/webpack/example/src/App.js
@@ -2,10 +2,10 @@ import { h } from 'preact';
 import { useCounter } from './useCounter';
 
 const Comp1 = () => {
-  const [count, increment] = useCounter(0);
+  const [count, increment] = useCounter();
   return (
     <div>
-      <p>Counter: {count}</p>
+      <p>Count: {count}</p>
       <button onClick={increment}>Increment</button>
     </div>
   );

diff --git a/packages/webpack/example/src/useCounter.js b/packages/webpack/example/src/useCounter.js
@@ -1,6 +1,6 @@
 import { useState } from 'preact/hooks';
 
-export const useCounter = initialValue => {
+export const useCounter = () => {
   const [state, setState] = useState(0);
-  return [state, () => setState(state + 2)];
+  return [state, () => setState(state + 1)];
 };
diff --git a/packages/webpack/example/webpack.config.js b/packages/webpack/example/webpack.config.js
@@ -1,62 +1,33 @@
-const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const PreactRefreshPlugin = require('@prefresh/webpack');
 
-const makeConfig = () => {
-  const { NODE_ENV } = process.env;
+module.exports = (env) => {
+  const { NODE_ENV = 'development' } = env;
   const isProduction = NODE_ENV === 'production';
 
-  // Build plugins
   const plugins = [
     new HtmlWebpackPlugin(),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
-    }),
   ];
-
   if (!isProduction) {
-    plugins.push(new PreactRefreshPlugin());
     plugins.push(new webpack.HotModuleReplacementPlugin());
+    plugins.push(new PreactRefreshPlugin());
   }
 
-  // Return configuration
   return {
     mode: isProduction ? 'production' : 'development',
     entry: './src/index.js',
-    stats: 'normal',
     devServer: {
-      contentBase: path.join(__dirname, 'dist'),
-      host: 'localhost',
-      port: 3000,
-      historyApiFallback: true,
       hot: true,
-      inline: true,
-      publicPath: '/',
-      clientLogLevel: 'none',
-      open: true,
-      overlay: true,
-    },
-    output: {
-      path: path.resolve(__dirname, 'dist'),
-      publicPath: '/',
-    },
-    resolve: {
-      alias: {
-        preact: path.resolve(__dirname, 'node_modules', 'preact'),
-      },
     },
     plugins,
     module: {
       rules: [
         {
-          test: /\.js$|\.jsx$/,
-          include: [path.resolve(__dirname, 'src')],
+          test: /\.jsx?$/,
           loader: 'babel-loader',
         },
       ],
     },
   };
 };
-
-module.exports = makeConfig();