joyboy/webpack.config.dev.js at main · zoop/joyboy · 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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
const path = require('path');
const webpack = require('webpack');

module.exports = {
  name: 'ui',
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  entry: [
    'webpack-hot-middleware/client?name=ui&path=/__webpack_hmr&noInfo=true',
    path.resolve(__dirname, 'src'),
  ],
  output: {
    path: path.resolve(__dirname, 'src'),
    filename: 'webviewer-ui.min.js',
    chunkFilename: 'chunks/[name].chunk.js',
    publicPath: '/',
  },
  plugins: [new webpack.HotModuleReplacementPlugin()],
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            ignore: [
              /\/core-js/,
            ],
            sourceType: "unambiguous",
            presets: [
              '@babel/preset-react',
              [
                '@babel/preset-env',
                {
                  useBuiltIns: 'usage',
                  corejs: 3,
                },
              ],
            ],
            plugins: [
              'react-hot-loader/babel',
              '@babel/plugin-proposal-function-sent',
              '@babel/plugin-proposal-export-namespace-from',
              '@babel/plugin-proposal-numeric-separator',
              '@babel/plugin-proposal-throw-expressions',
              '@babel/plugin-proposal-class-properties',
              '@babel/plugin-proposal-optional-chaining',
            ],
          },
        },
        include: [path.resolve(__dirname, 'src')],
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              insert: function (styleTag) {
                function findNestedWebComponents(tagName, root = document) {
                  const elements = [];

                  // Check direct children
                  root.querySelectorAll(tagName).forEach(el => elements.push(el));

                  // Check shadow DOMs
                  root.querySelectorAll('*').forEach(el => {
                    if (el.shadowRoot) {
                      elements.push(...findNestedWebComponents(tagName, el.shadowRoot));
                    }
                  });

                  return elements;
                }
                // If its the iframe we just append to the document head
                if (!window.isApryseWebViewerWebComponent) {
                  document.head.appendChild(styleTag);
                  return;
                }

                let webComponents;
                // First we see if the webcomponent is at the document level
                webComponents = document.getElementsByTagName('apryse-webviewer');
                // If not, we check have to check if it is nested in another webcomponent
                if (!webComponents.length) {
                  webComponents = findNestedWebComponents('apryse-webviewer');
                }
                // Now we append the style tag to each webcomponent
                const clonedStyleTags = [];
                for (let i = 0; i < webComponents.length; i++) {
                  const webComponent = webComponents[i];
                  if (i === 0) {
                    webComponent.shadowRoot.appendChild(styleTag);
                    styleTag.onload = function () {
                      if (clonedStyleTags.length > 0) {
                        clonedStyleTags.forEach((styleNode) => {
                          // eslint-disable-next-line no-unsanitized/property
                          styleNode.innerHTML = styleTag.innerHTML;
                        });
                      }
                    };
                  } else {
                    const styleNode = styleTag.cloneNode(true);
                    webComponent.shadowRoot.appendChild(styleNode);
                    clonedStyleTags.push(styleNode);
                  }
                }
              },
            },
          },
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: (loader) => [
                require('postcss-import')({ root: loader.resourcePath }),
                require('postcss-preset-env')(),
                require('cssnano')(),
              ],
            },
          },
          'sass-loader',
        ],
        include: path.resolve(__dirname, 'src'),
      },
      {
        test: /\.svg$/,
        use: ['svg-inline-loader'],
      },
      {
        test: /\.woff(2)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
            },
          },
        ],
      },
    ],
  },
  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom',
      src: path.resolve(__dirname, 'src/'),
      components: path.resolve(__dirname, 'src/components/'),
      constants: path.resolve(__dirname, 'src/constants/'),
      helpers: path.resolve(__dirname, 'src/helpers/'),
      hooks: path.resolve(__dirname, 'src/hooks/'),
      actions: path.resolve(__dirname, 'src/redux/actions/'),
      reducers: path.resolve(__dirname, 'src/redux/reducers/'),
      selectors: path.resolve(__dirname, 'src/redux/selectors/'),
      core: path.resolve(__dirname, 'src/core/'),
    },
  },
};