Add missing CSS in dist folder

buildtools/webpack.commons.js

@@ -21,7 +21,7 @@
 
 const path = require('path');
 const webpack = require('webpack');
-const {PromiseTask} = require('event-hooks-webpack-plugin/lib/tasks');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const devMode = process.env.NODE_ENV !== 'production';
 
@@ -85,13 +85,13 @@ module.exports = function (config) {
 
   rules.push({
     test: /\.css$/,
-    use: [{loader: 'style-loader'}, {loader: 'css-loader'}],
+    use: [{loader: MiniCssExtractPlugin.loader}, {loader: 'css-loader'}],
   });
 
   rules.push({
     test: /\.s[ac]ss$/i,
     use: [
-      {loader: 'style-loader'},
+      {loader: MiniCssExtractPlugin.loader},
       {loader: 'css-loader'},
       {loader: 'sass-loader', options: {warnRuleAsWarning: false}},
     ],
@@ -141,6 +141,9 @@ module.exports = function (config) {
       resourceRegExp: /^\.\/locale$/,
       contextRegExp: /node_modules\/moment\/src\/lib\/locale$/,
     }),
+    new MiniCssExtractPlugin({
+      filename: '[name]-[contenthash:6].css',
+    }),
   ];
   if (config.nodll != true) {
     plugins.push(dllPlugin);

buildtools/webpack.dist.js

@@ -19,10 +19,26 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const plugins = [];
+const entry = {};
+
+for (const name of ['desktop', 'mobile', 'iframe_api']) {
+  const folder = `contribs/gmf/apps/${name}`;
+  entry[name] = `./${folder}/Controller.js`;
+  plugins.push(
+    new HtmlWebpackPlugin({
+      template: `${folder}/index.html.ejs`,
+      inject: false,
+      filename: `${name}.html`,
+      chunks: [name],
+    }),
+  );
+}
+
 module.exports = {
-  entry: {
-    desktop: './contribs/gmf/apps/desktop_alt/Controller.js',
-    mobile: './contribs/gmf/apps/mobile_alt/Controller.js',
-    iframe_api: './contribs/gmf/apps/iframe_api/Controller.js',
-  },
+  entry: entry,
+  plugins: plugins,
 };

buildtools/webpack.prod.js

@@ -27,7 +27,7 @@ module.exports = function () {
     mode: 'production',
     devtool: 'source-map',
     output: {
-      filename: '[name].[chunkhash:6].js',
+      filename: '[name]-[chunkhash:6].js',
       assetModuleFilename: '[name]-[contenthash:6][ext]',
     },
     plugins: [new webpack.optimize.ModuleConcatenationPlugin()],

package.json

@@ -187,6 +187,7 @@
     "karma-webpack": "5.0.1",
     "loader-utils": "3.3.1",
     "magic-comments-loader": "2.1.3",
+    "mini-css-extract-plugin": "2.9.1",
     "minify-html-literals-loader": "1.1.1",
     "neat-csv": "6.0.1",
     "parse-absolute-css-unit": "1.0.2",
@@ -198,7 +199,6 @@
     "start-server-and-test": "2.0.5",
     "storybook": "8.2.9",
     "strip-bom": "5.0.0",
-    "style-loader": "4.0.0",
     "svgo": "3.3.2",
     "svgo-loader": "4.0.0",
     "terser": "5.31.6",