Simplify webpack config using html-bundler-webpack-plugin (#415)

Author: webdiscus

examples/src/index.html

@@ -9,7 +9,7 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700|Roboto">
-    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="./scss/style.scss">
 
     <!-- Global site tag (gtag.js) - Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-133457161-1"></script>
@@ -107,6 +107,6 @@ <h2>Filter Example</h2>
       </footer>
     </section>
 
-    <script src="index.js"></script>
+    <script src="./index.jsx"></script>
   </body>
 </html>

package.json

@@ -67,10 +67,9 @@
     "eslint-plugin-react": "^7.10.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "global-jsdom": "^8.6.0",
-    "html-webpack-plugin": "^5.5.0",
+    "html-bundler-webpack-plugin": "^1.6.5",
     "jsdom": "^21.0.0",
     "less": "^4.1.3",
-    "mini-css-extract-plugin": "^2.7.2",
     "mocha": "^10.0.0",
     "postcss": "^8.4.21",
     "postcss-cli": "^10.1.0",
@@ -83,7 +82,6 @@
     "webpack": "^5.3.2",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1",
-    "webpack-remove-empty-scripts": "^1.0.1",
     "webpack-stream": "^7.0.0"
   },
   "dependencies": {

webpack.config.test.js

@@ -1,17 +1,10 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
 const path = require('node:path');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
 
 module.exports = {
     mode: 'development',
-    entry: {
-        index: path.join(__dirname, 'examples/src/index.jsx'),
-        style: path.join(__dirname, 'examples/src/scss/style.scss'),
-    },
     output: {
         path: path.join(__dirname, 'examples/dist'),
-        filename: '[name].js',
         library: {
             name: 'ReactCheckboxTree',
             type: 'umd',
@@ -33,7 +26,6 @@ module.exports = {
             {
                 test: /\.s[ac]ss$/i,
                 use: [
-                    MiniCssExtractPlugin.loader,
                     'css-loader',
                     'sass-loader',
                 ],
@@ -48,15 +40,16 @@ module.exports = {
         watchFiles: ['src/**/*', 'examples/src/**/*'],
     },
     plugins: [
-        new RemoveEmptyScriptsPlugin({}),
-        new MiniCssExtractPlugin({
-            filename: '[name].css',
-        }),
-        new HtmlWebpackPlugin({
-            template: 'examples/src/index.html',
-            filename: 'index.html',
-            inject: false,
-            minify: false,
-        }),
+        new HtmlBundlerPlugin({
+            entry: {
+              index: 'examples/src/index.html',
+            },
+            js: {
+                filename: '[name].[contenthash:8].js',
+            },
+            css: {
+                filename: '[name].[contenthash:8].css',
+            }
+          }),
     ],
 };