feat: github action for demo.

a-rudenko · a-rudenko · commit 111d0039b01c · 2025-01-26T17:21:54.000+03:00
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -28,4 +28,4 @@ jobs:
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.ACTION }}
-          publish_dir: dist/demo
+          publish_dir: dist
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
   "scripts": {
     "start": "webpack serve",
     "build": "webpack --mode production",
-    "build:demo": "webpack --config src/demo/webpack.demo.config.js --mode production",
+    "build:demo": "webpack --config webpack.demo.config.js --mode production",
     "prepare": "npm run build"
   },
   "keywords": [
diff --git a/src/demo/demo.html b/src/demo/demo.html
@@ -7,5 +7,9 @@
 </head>
 <body>
 <div id="tech-particles"></div>
+<script type="module">
+    import { initWebGLTechParticles } from './<%= htmlWebpackPlugin.files.js[0] %>';
+    initWebGLTechParticles('tech-particles');
+</script>
 </body>
 </html>
diff --git a/src/texture.js b/src/texture.js
@@ -26,7 +26,7 @@ const DEFAULT_ICONS = [
     'open-ai.webp',
 ];
 
-const DEFAULT_ICON_FOLDER = './dist/assets/icons';
+const DEFAULT_ICON_FOLDER = ICON_FOLDER;
 
 const loadTexture = (textureLoader, path) => {
     return new Promise((resolve) => {
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,6 +1,7 @@
 const path = require('path');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const TerserPlugin = require('terser-webpack-plugin');
+const webpack = require('webpack');
 
 module.exports = {
     entry: './src/index.js',
@@ -55,5 +56,8 @@ module.exports = {
                 {from: 'src/assets/icons', to: 'assets/icons'},
             ],
         }),
+        new webpack.DefinePlugin({
+            ICON_FOLDER: JSON.stringify('./dist/assets/icons'),
+        }),
     ],
 };
diff --git a/webpack.demo.config.js b/webpack.demo.config.js
@@ -1,14 +1,21 @@
 const path = require('path');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const webpack = require('webpack');
 
 module.exports = {
-    entry: './src/demo/demo.js', // Точка входа — demo.js
+    entry: './src/demo/demo.js',
     mode: 'production',
     output: {
-        filename: 'webgl-tech-particles.demo.js', // Имя выходного файла
-        path: path.resolve(__dirname, '../../dist/demo'), // Выходная папка — dist/demo
-        clean: true, // Очистка папки перед сборкой
+        filename: 'webgl-tech-particles.demo.js',
+        path: path.resolve(__dirname, 'dist'),
+        library: {
+            type: 'module',
+        },
+        clean: true,
+    },
+    experiments: {
+        outputModule: true,
     },
     module: {
         rules: [
@@ -30,24 +37,27 @@ module.exports = {
                 test: /\.(png|jpg|gif|webp)$/,
                 type: 'asset/resource',
                 generator: {
-                    filename: 'assets/icons/[name][ext]', // Иконки будут в assets/icons
+                    filename: 'assets/icons/[name][ext]',
                 },
             },
         ],
     },
     plugins: [
-        // Копируем settings.json и иконки
         new CopyWebpackPlugin({
             patterns: [
-                { from: path.resolve(__dirname, '../../settings.json'), to: 'settings.json' },
-                { from: path.resolve(__dirname, '../assets/icons'), to: 'assets/icons' },
+                {from: 'settings.json', to: 'settings.json'},
+                {from: 'src/assets/icons', to: 'assets/icons'},
             ],
         }),
-        // Генерируем HTML-файл для демо
         new HtmlWebpackPlugin({
-            template: path.resolve(__dirname, '../demo/demo.html'),
-            filename: 'demo.html', // Имя выходного файла
-            title: 'WebGL Tech Particles Demo', // Заголовок страницы
+            template: 'src/demo/demo.html',
+            filename: 'demo.html',
+            title: 'WebGL Tech Particles Demo',
+            inject: true,
+            scriptLoading: 'module',
+        }),
+        new webpack.DefinePlugin({
+            ICON_FOLDER: JSON.stringify('./assets/icons'),
         }),
     ],
 };
