/ app / front / dev.webpack.config.mjs
dev.webpack.config.mjs
  1  import HTMLWebpackPlugin from "html-webpack-plugin"
  2  import MiniCssExtractPlugin from "mini-css-extract-plugin"
  3  
  4  export default {
  5    mode: "development",
  6    entry: {
  7         viewer_1: "./src/viewer_1.view.js",
  8         viewer_2: "./src/viewer_2.view.js",
  9         viewer_3: "./src/viewer_3.view.js",
 10         viewer_4: "./src/viewer_4.view.js",
 11         viewer_5: "./src/viewer_5.view.js",
 12         
 13           config: "./src/dev.config.view.js",
 14      broadcaster: "./src/dev.broadcaster.view.js", 
 15       
 16        extHelper: "./src/twitchExtHelperMock.js",
 17    },
 18    output: {
 19      clean: true,
 20      filename: (pathData) => { return (pathData.chunk.name == "extHelper") ? "twitchExtHelperMock.js" : "[name]/[name].js" }, 
 21    },
 22    resolve: { extensions: [".js", ".css"] },
 23    module: {
 24      rules: [
 25        {
 26          test: /\.svg$/i,
 27          type: "asset/inline"
 28        },
 29        {
 30          test: /\.js$/i,
 31          exclude: /node_modules/,
 32          use: {
 33            loader: "esbuild-loader",
 34            options: {
 35              target: "esnext"
 36            }
 37          }
 38        },
 39        {
 40          test: /\.css$/i,
 41          use: [MiniCssExtractPlugin.loader, "css-loader"],
 42        }
 43      ]
 44    },
 45    devServer: {
 46      hot: true,
 47      liveReload: true,
 48      open: true,
 49      port: 1111,
 50      watchFiles: "./src/*",
 51    },
 52    devtool: "eval",
 53    optimization: { minimize: false },
 54    plugins: [
 55      new MiniCssExtractPlugin({ filename: "[name]/[name].css" }),
 56      new HTMLWebpackPlugin({
 57        excludeChunks: [
 58          "viewer_1",
 59          "viewer_2",
 60          "viewer_3",
 61          "viewer_4",
 62          "viewer_5",
 63          "config",
 64          "broadcaster",
 65          "extHelper",
 66        ],
 67        filename: "index.html",
 68        template: "./src/index.html"
 69      }),
 70      new HTMLWebpackPlugin({
 71        chunks: ["viewer_1"],
 72        filename: "viewer_1/viewer_1.html",
 73        template: "./src/dev.template.html",
 74        scriptLoading: "module"
 75      }),
 76      new HTMLWebpackPlugin({
 77        chunks: ["viewer_2"],
 78        filename: "viewer_2/viewer_2.html",
 79        template: "./src/dev.template.html",
 80        scriptLoading: "module"
 81      }),
 82      new HTMLWebpackPlugin({
 83        chunks: ["viewer_3"],
 84        filename: "viewer_3/viewer_3.html",
 85        template: "./src/dev.template.html",
 86        scriptLoading: "module"
 87      }),
 88      new HTMLWebpackPlugin({
 89        chunks: ["viewer_4"],
 90        filename: "viewer_4/viewer_4.html",
 91        template: "./src/dev.template.html",
 92        scriptLoading: "module"
 93      }),
 94      new HTMLWebpackPlugin({
 95        chunks: ["viewer_5"],
 96        filename: "viewer_5/viewer_5.html",
 97        template: "./src/dev.template.html",
 98        scriptLoading: "module"
 99      }),
100      new HTMLWebpackPlugin({
101        chunks: ["config"],
102        filename: "config/config.html",
103        template: "./src/dev.template.html",
104        scriptLoading: "module"
105      }),
106      new HTMLWebpackPlugin({
107        chunks: ["broadcaster"],
108        filename: "broadcaster/broadcaster.html",
109        template: "./src/dev.template.html",
110        scriptLoading: "module"
111      }),
112    ]
113  }