webviewer-ui/webpack.config.dev.js at 11.12 · ApryseSDK/webviewer-ui · 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
const path = require('path');
const webpack = require('webpack');
const { postCssLoader, styleLoaderOptions, createDevThemeRule } = require('./webpack.helpers');

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: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
        use: [],
      },
      {
        test: /\.(js|jsx|mjs)$/,
        use: {
          loader: 'babel-loader',
          options: {
            ignore: [
              /\/core-js/,
            ],
            sourceType: 'unambiguous',
            presets: [
              [
                '@babel/preset-react',
                {
                  runtime: 'automatic',
                  importSource: '@emotion/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',
              require.resolve('@emotion/babel-plugin'),
            ],
          },
        },
        include: [
          path.resolve(__dirname, 'src'),
          path.resolve(__dirname, 'node_modules/react-quill-new'),
          path.resolve(__dirname, 'node_modules/quill-mention'),
          path.resolve(__dirname, 'node_modules/quill'),
          path.resolve(__dirname, 'node_modules/react-error-boundary'),
        ],
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: 'style-loader',
            options: styleLoaderOptions,
          },
          'css-loader',
          postCssLoader,
          'sass-loader',
        ],
        include: path.resolve(__dirname, 'src'),
        exclude: path.resolve(__dirname, 'src/components/App/'),
      },
      {
        test: /\.scss$/,
        oneOf: [
          createDevThemeRule(/theme-light-high-contrast/, 'light-high-contrast', 'highContrastLight.scss', path),
          createDevThemeRule(/theme-dark-high-contrast/, 'dark-high-contrast', 'highContrastDark.scss', path),
          createDevThemeRule(/theme-light-modular/, 'light-modular', 'lightWCAG.scss', path),
          createDevThemeRule(/theme-dark-modular/, 'dark-modular', 'darkWCAG.scss', path),
          createDevThemeRule(/theme-light/, 'light', 'light.scss', path),
          createDevThemeRule(/theme-dark/, 'dark', 'dark.scss', path),
          createDevThemeRule(undefined, 'light', 'light.scss', path),
        ],
        include: path.resolve(__dirname, 'src/components/App/'),
      },
      {
        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/'),
    },
  },
};