wisemapping-frontend/packages/web2d/webpack.playground.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: {
    arrow: './test/playground/arrow.js',
    curvedLine: './test/playground/curvedLine.js',
    events: './test/playground/events.js',
    font: './test/playground/font.js',
    rect: './test/playground/rect.js',
    line: './test/playground/line.js',
    workspace: './test/playground/workspace.js',
    polyLine: './test/playground/polyLine.js',
    shapes: './test/playground/shapes.js',
    group: './test/playground/group.js',
    prototype: './test/playground/prototype.js',
    text: './test/playground/text.js',
    image: './test/playground/image.js',
  },
  output: {
    path: path.resolve(__dirname, 'test/playground/dist'),
    filename: '[name].js',
    publicPath: '/',
  },
  devServer: {
    historyApiFallback: true,
    port: 8080,
    open: false,
  },
  mode: 'development',
  devtool: 'source-map',
  module: {
    rules: [
      {
        use: 'babel-loader',
        test: /.js$/,
        exclude: [/node_modules/],
      },
      {
        test: /\.(png|svg)$/i,
        type: 'asset/inline',
      },
    ],
  },
  resolve: {
    alias: {
      '@libraries': path.resolve(__dirname, '../../libraries/'),
    },
    extensions: ['.js', '.json'],
  },
  plugins: [
    new CopyPlugin({
      patterns: [{ from: 'test/playground/styles.css', to: 'styles.css' }],
    }),
    new HtmlWebpackPlugin({
      chunks: ['index'],
      filename: 'index.html',
      template: 'test/playground/index.html',
    }),
    new HtmlWebpackPlugin({
      chunks: ['arrow'],
      filename: 'arrow.html',
      template: 'test/playground/arrow.html',
    }),
    new HtmlWebpackPlugin({
      chunks: ['curvedLine'],
      filename: 'curvedLine.html',
      template: 'test/playground/curvedLine.html',
    }),
    new HtmlWebpackPlugin({
      chunks: ['events'],
      filename: 'events.html',
      template: 'test/playground/events.html',
    }),
    new HtmlWebpackPlugin({
      chunks: ['font'],
      filename: 'font.html',
      template: 'test/playground/font.html',
    }),
    new HtmlWebpackPlugin({
      chunks: ['rect'],
      filename: 'rect.html',
      template: 'test/playground/rect.html',
    }),
    new HtmlWebpackPlugin({
      chunks: ['line'],
      filename: 'line.html',
      template: 'test/playground/line.html',
    }),
    new HtmlWebpackPlugin({
      chunks: ['workspace'],
      filename: 'workspace.html',
      template: 'test/playground/workspace.html',
    }),
    new HtmlWebpackPlugin({
      chunks: ['polyLine'],
      filename: 'polyLine.html',
      template: 'test/playground/polyLine.html',
    }),
    new HtmlWebpackPlugin({
      chunks: ['shapes'],
      filename: 'shapes.html',
      template: 'test/playground/shapes.html',
    }),
    new HtmlWebpackPlugin({
      chunks: ['group'],
      filename: 'group.html',
      template: 'test/playground/group.html',
    }),
    new HtmlWebpackPlugin({
      chunks: ['prototype'],
      filename: 'prototype.html',
      template: 'test/playground/prototype.html',
    }),
    new HtmlWebpackPlugin({
      chunks: ['text'],
      filename: 'text.html',
      template: 'test/playground/text.html',
    }),
    new HtmlWebpackPlugin({
      chunks: ['image'],
      filename: 'image.html',
      template: 'test/playground/image.html',
    }),
  ],
};