initial commit

frontend/webpack/webpack.common.js

@@ -0,0 +1,79 @@
+const glob = require("glob");
+const Path = require("path");
+const {CleanWebpackPlugin} = require("clean-webpack-plugin");
+const CopyWebpackPlugin = require("copy-webpack-plugin");
+const WebpackAssetsManifest = require("webpack-assets-manifest");
+const webpack = require("webpack");
+
+const getEntryObject = () => {
+    const entries = {};
+    glob.sync(Path.join(__dirname, "../src/application/*.js")).forEach((path) => {
+        const name = Path.basename(path, ".js");
+        entries[name] = path;
+    });
+    return entries;
+};
+
+module.exports = {
+    entry: getEntryObject(),
+    output: {
+        path: Path.join(__dirname, "../build"),
+        filename: "js/[name].js",
+        publicPath: "/static/",
+        assetModuleFilename: "[path][name][ext]",
+    },
+    // optimization: {
+    //     splitChunks: {
+    //         chunks: "all",
+    //     },
+    //
+    //     runtimeChunk: "single",
+    // },
+    plugins: [
+        new CleanWebpackPlugin(),
+        new CopyWebpackPlugin({
+            patterns: [
+                {from: Path.resolve(__dirname, "../vendors"), to: "vendors"},
+            ],
+        }),
+        new CopyWebpackPlugin({
+            patterns: [
+                {from: Path.resolve(__dirname, "../assets"), to: "assets"},
+            ],
+        }),
+        new WebpackAssetsManifest({
+            entrypoints: true,
+            output: "manifest.json",
+            writeToDisk: true,
+            publicPath: true,
+        }),
+        // new webpack.ProvidePlugin({
+        //     $: "jquery",
+        //     jQuery: "jquery",
+        // })
+    ],
+    resolve: {
+        alias: {
+            "~": Path.resolve(__dirname, "../src"),
+            jquery: "jquery/dist/jquery"
+        },
+    },
+    module: {
+        rules: [
+            {
+                test: /\.mjs$/,
+                include: /node_modules/,
+                type: "javascript/auto",
+            },
+            {
+                test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
+                type: "asset",
+            },
+            {
+                test: /\.css$/i,
+                include: Path.resolve(__dirname, 'src'),
+                use: ['style-loader', 'css-loader', 'postcss-loader'],
+            },
+        ],
+    },
+};

frontend/webpack/webpack.config.dev.js

@@ -0,0 +1,73 @@
+const Path = require("path");
+const Webpack = require("webpack");
+const { merge } = require("webpack-merge");
+const StylelintPlugin = require("stylelint-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const ESLintPlugin = require("eslint-webpack-plugin");
+
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+  target: "web",
+  mode: "development",
+  devtool: "inline-source-map",
+  output: {
+    chunkFilename: "js/[name].chunk.js",
+    publicPath: "http://localhost:9091/",
+  },
+  devServer: {
+    hot: true,
+    host: "0.0.0.0",
+    port: 9091,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
+    devMiddleware: {
+      writeToDisk: true,
+    },
+  },
+  plugins: [
+    new Webpack.DefinePlugin({
+      "process.env.NODE_ENV": JSON.stringify("development"),
+    }),
+    new StylelintPlugin({
+      files: Path.resolve(__dirname, "../src/**/*.s?(a|c)ss"),
+    }),
+    new ESLintPlugin({
+      extensions: "js",
+      emitWarning: true,
+      files: Path.resolve(__dirname, "../src"),
+    }),
+    new MiniCssExtractPlugin({
+      filename: "css/[name].css",
+      chunkFilename: "css/[id].css",
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.html$/i,
+        loader: "html-loader",
+      },
+      {
+        test: /\.js$/,
+        include: Path.resolve(__dirname, "../src"),
+        loader: "babel-loader",
+      },
+      {
+        test: /\.s?css$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: "css-loader",
+            options: {
+              sourceMap: true,
+            },
+          },
+          "postcss-loader",
+          "sass-loader",
+        ],
+      },
+    ],
+  },
+});

frontend/webpack/webpack.config.prod.js

@@ -0,0 +1,45 @@
+const Webpack = require("webpack");
+const { merge } = require("webpack-merge");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+  mode: "production",
+  bail: true,
+  output: {
+    filename: "js/[name].[chunkhash:8].js",
+    chunkFilename: "js/[name].[chunkhash:8].chunk.js",
+  },
+  plugins: [
+    new Webpack.DefinePlugin({
+      "process.env.NODE_ENV": JSON.stringify("production"),
+    }),
+    new MiniCssExtractPlugin({
+      filename: "css/[name].[contenthash].css",
+      chunkFilename: "css/[id].[contenthash].css",
+    }),
+  ],
+  optimization: {
+    minimize: true,
+    minimizer: [new TerserPlugin()],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: "babel-loader",
+      },
+      {
+        test: /\.s?css/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          "css-loader",
+          "postcss-loader",
+          "sass-loader",
+        ],
+      },
+    ],
+}
+});

frontend/webpack/webpack.config.watch.js

@@ -0,0 +1,61 @@
+const Path = require("path");
+const Webpack = require("webpack");
+const { merge } = require("webpack-merge");
+const StylelintPlugin = require("stylelint-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const ESLintPlugin = require("eslint-webpack-plugin");
+
+const common = require("./webpack.common.js");
+
+module.exports = merge(common, {
+  target: "web",
+  mode: "development",
+  devtool: "inline-source-map",
+  output: {
+    chunkFilename: "js/[name].chunk.js",
+  },
+  plugins: [
+    new Webpack.DefinePlugin({
+      "process.env.NODE_ENV": JSON.stringify("development"),
+    }),
+    new StylelintPlugin({
+      files: Path.resolve(__dirname, "../src/**/*.s?(a|c)ss"),
+    }),
+    new ESLintPlugin({
+      extensions: "js",
+      emitWarning: true,
+      files: Path.resolve(__dirname, "../src"),
+    }),
+    new MiniCssExtractPlugin({
+      filename: "css/[name].css",
+      chunkFilename: "css/[id].css",
+    }),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.html$/i,
+        loader: "html-loader",
+      },
+      {
+        test: /\.js$/,
+        include: Path.resolve(__dirname, "../src"),
+        loader: "babel-loader",
+      },
+      {
+        test: /\.s?css$/i,
+        use: [
+          MiniCssExtractPlugin.loader,
+          {
+            loader: "css-loader",
+            options: {
+              sourceMap: true,
+            },
+          },
+          "postcss-loader",
+          "sass-loader",
+        ],
+      },
+    ],
+  },
+});