rdforms/webpack.dev.js at develop · MetaSolutionsAB/rdforms · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin');
const CircularDependencyPlugin = require('circular-dependency-plugin');

const path = require('path');
const examples = [1, 2, 3, 4, 5, 6, 7, 8];

const getHTMLPlugins = () => {
  return [
    // create all examples' html
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: __dirname + `/html/index.html`,
      inject: true,
    }),
    // create all examples' html
    ...examples.map((exampleNumber) => new HtmlWebpackPlugin({
      filename: `example${exampleNumber}/index.html`,
      template: __dirname + `/html/example${exampleNumber}/index.html`,
      inject: true,
    })),
    //  append assets for all examples
    new HtmlWebpackTagsPlugin({
      tags: [{
        path: 'https://fonts.googleapis.com/css?family=Roboto:300,400,500,700',
        type: 'css',
        publicPath: false,
      }, {
//        path: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css',
        path: '/fontawesome-free/css/all.min.css',
        type: 'css',
        publicPath: false,
      }, {
//        path: 'https://unpkg.com/@entryscape/rdfjson/dist/rdfjson.js',
        path: '/rdfjson/dist/rdfjson.js',
        type: 'js',
        publicPath: false,
      },
        '../styles.css'
      ],
      append: true
    }), // append styles.css to all examples
    // append examples' respective js for all html
    ...examples.map((number) => new HtmlWebpackTagsPlugin({
      files: [`example${number}/**/*.html`],
      tags: [{
        path: `./example${number}/init.js`,
        attributes: {
          type: 'module',
        }
      }],
      append: true
    })),
  ];
};

module.exports = (env) => {
  const type = env.type ? env.type : 'react';

  const devConfig = {
    entry: `./renderers/${type}.js`,
    output: {
      filename: 'rdforms.[name].js',
      library: 'rdforms',
      libraryTarget: "umd",
      publicPath: '/',
    },
    mode: 'development',
    devtool: 'inline-source-map',
    plugins: [
      ...getHTMLPlugins(),
       //new CircularDependencyPlugin({
       //  // exclude detection of files based on a RegExp
       //  exclude: /a\.js|node_modules/,
       //  // add errors to webpack instead of warnings
       //  failOnError: false,
       //  // allow import cycles that include an asyncronous import,
       //  // e.g. via import(/* webpackMode: "weak" */ './file.js')
       //  allowAsyncCycles: false,
       //  // set the current working directory for displaying module paths
       //  cwd: process.cwd(),
       //}),
    ],
    devServer: {
      hot: true,
      open: true,
      static: [{
        directory: path.join(__dirname, '/html'),
      }, {
        directory: path.join(__dirname, 'node_modules', '@entryscape'),
      }, {
        directory: path.join(__dirname, 'node_modules', '@fortawesome'),
      }],
    },
  };

  // // Customizing object behavior
  // return merge({
  //   customizeObject(a, b, key) {
  //     if (key === 'entry') {
  //       // Custom merging
  //       return b;
  //     }

  //     // Fall back to default merging
  //     return undefined;
  //   }
  // })(common, devConfig);
  return merge(common, devConfig);
};