webtrees/webpack.config.js at main · ekdahl/webtrees · 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
// webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

// CSS entry points
const cssEntries = [
  'administration',
  'clouds',
  'colors',
  'fab',
  'minimal',
  'webtrees',
  'xenea',
  'vendor',
];

const cssEntryPoints = Object.fromEntries(
  cssEntries.map(name => [`css/${name}.min`, path.resolve(__dirname, `resources/css/${name}.css`)])
);

module.exports = (env, argv) => ({
    devtool: false,

    entry: {
      'js/vendor.min': path.resolve(__dirname, 'resources/js/vendor.js'),
      'js/tinymce.min': path.resolve(__dirname, 'resources/js/tinymce.js'),
      'js/administration.min': path.resolve(__dirname, 'resources/js/administration.js'),
      'js/webtrees.min': [
        path.resolve(__dirname, 'resources/js/webtrees.js'),
        path.resolve(__dirname, 'resources/js/statistics.js'),
        path.resolve(__dirname, 'resources/js/treeview.js'),
      ],
      ...cssEntryPoints,
    },

    output: {
      path: path.resolve(__dirname, 'public'),
      filename: '[name].js',
      clean: false,
    },

    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader',
            options: {
              targets: 'defaults',
              presets: ['@babel/preset-env'],
            },
          },
        },
        {
          test: /\.css$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: 'css-loader',
              options: {
                url: false,
                importLoaders: 1,
              },
            },
            {
              loader: 'postcss-loader',
              options: {
                postcssOptions: {
                  plugins: [
                    'postcss-import',
                    ['postcss-rtlcss', { safeBothPrefix: true }],
                    'autoprefixer',
                    ['postcss-image-inliner', { assetPaths: ['resources/css'], maxFileSize: 0 }],
                  ],
                },
              },
            },
          ],
        },
      ],
    },

    plugins: [
      new MiniCssExtractPlugin({
        filename: '[name].css',
      }),
      new CopyPlugin({
        patterns: [
          { from: 'node_modules/leaflet/dist/images/*', to: 'css/images/[name][ext]' },
          { from: 'node_modules/dejavu-fonts-ttf/ttf/DejaVuSans.ttf', to: path.resolve(__dirname, 'resources/fonts/DejaVuSans.ttf') },
        ],
      }),
      {
        // Remove empty JS files generated from CSS-only entries
        apply(compiler) {
          compiler.hooks.afterEmit.tap('RemoveEmptyJsPlugin', () => {
            const fs = require('fs');
            cssEntries.forEach(name => {
              const jsFile = path.resolve(__dirname, `public/css/${name}.min.js`);
              if (fs.existsSync(jsFile)) {
                fs.unlinkSync(jsFile);
              }
            });
          });
        },
      },
    ],

    optimization: {
      minimizer: [
        new TerserPlugin(),
        new CssMinimizerPlugin(),
      ],
    },

    performance: {
      hints: false,
    },
});