ug-district-datahub/webpack.config.js at dev · devinit/ug-district-datahub · 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
/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

const sharedConfig = {
  target: 'web',
  mode: 'development',
  resolve: {
    extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx|js|jsx)$/,
        loader: 'babel-loader',
        include: path.resolve(__dirname, 'src'),
      },
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader',
        include: path.resolve(__dirname, 'src'),
      },
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
  performance: {
    maxEntrypointSize: 512000,
    maxAssetSize: 512000,
  },
  watch: true,
  devtool: 'inline-source-map',
};

const wagtailAceEditorConfig = {
  ...sharedConfig,
  entry: './src/dashboard/widgets/ace-editor.ts',
  output: {
    path: path.resolve(__dirname, 'dashboard/static/dashboard/widgets/js'),
    filename: 'ace-editor.js',
    library: 'WagtailAceEditor',
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: './dashboard/static/dashboard/widgets/css/ace-editor.css',
    }),
  ],
};

const diChartsConfig = {
  ...sharedConfig,
  entry: './src/dashboard/library/index.ts',
  output: {
    path: path.resolve(__dirname, 'dashboard/static/dashboard/js'),
    filename: 'dicharts.js',
    library: 'DICharts',
  },
  externals: ['echarts'],
};

const pivotTableConfig = {
  ...sharedConfig,
  entry: './src/dashboard/widgets/pivot-table.ts',
  output: {
    path: path.resolve(__dirname, 'dashboard/static/dashboard/widgets/js'),
    filename: 'pivot-table.js',
    publicPath: '/assets/dashboard/widgets/js/',
    chunkFilename: 'table[chunkhash].js',
    libraryTarget: 'umd',
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: './dashboard/static/dashboard/widgets/css/ace-editor.css',
    }),
  ],
};

const appConfig = {
  ...sharedConfig,
  entry: {
    state: './src/state/index.ts',
    dashboard: './src/dashboard/index.ts',
  },
  output: {
    path: path.resolve(__dirname, 'src/assets/'),
    filename: '[name]/js/bundle.js',
    publicPath: '/assets/',
    chunkFilename: (pathData) => {
      const { runtime: name } = pathData.chunk;

      return `${name}/js/${name}[chunkhash].bundle.js`;
    },
  },
};

module.exports = [appConfig, wagtailAceEditorConfig, pivotTableConfig, diChartsConfig];