~cytrogen/masto-fe

ref: 6301ae80238572b954e0e1d99e8936caf35e0069 masto-fe/config/webpack/shared.js -rw-r--r-- 3.1 KiB
6301ae80 — Zoë Bijl Upgrade to Webpack 5 (#83) 6 months ago
                                                                                
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
// Note: You must restart bin/webpack-dev-server for changes to take effect

const { resolve } = require('path');

const CircularDependencyPlugin = require('circular-dependency-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const AssetsManifestPlugin = require('webpack-assets-manifest');

const { env, settings, core, flavours, output } = require('./configuration');
const rules = require('./rules');

function reducePacks (data, into = {}) {
  if (!data.pack) return into;

  for (const entry in data.pack) {
    const pack = data.pack[entry];
    if (!pack) continue;

    let packFiles = [];
    if (typeof pack === 'string')
      packFiles = [pack];
    else if (Array.isArray(pack))
      packFiles = pack;
    else
      packFiles = [pack.filename];

    if (packFiles) {
      into[data.name ? `flavours/${data.name}/${entry}` : `core/${entry}`] = packFiles.map(packFile => resolve(data.pack_directory, packFile));
    }
  }

  if (!data.name) return into;

  for (const skinName in data.skin) {
    const skin = data.skin[skinName];
    if (!skin) continue;

    for (const entry in skin) {
      const packFile = skin[entry];
      if (!packFile) continue;

      into[`skins/${data.name}/${skinName}/${entry}`] = resolve(packFile);
    }
  }

  return into;
}

const entries = Object.assign(
  reducePacks(core),
  Object.values(flavours).reduce((map, data) => reducePacks(data, map), {}),
);


module.exports = {
  entry: entries,

  output: {
    filename: 'js/[name].js',
    hotUpdateChunkFilename: 'js/[id]-[hash].hot-update.js',
    hashFunction: 'sha256',
    crossOriginLoading: 'anonymous',
    path: output.path,
    publicPath: output.publicPath,
  },

  optimization: {
    runtimeChunk: {
      name: 'common',
    },
    splitChunks: {
      cacheGroups: {
        default: false,
        vendorsVendors: false,
        common: {
          name: 'common',
          chunks (chunk) {
            return !(chunk.name in entries);
          },
          minChunks: 2,
          minSize: 0,
          test: /^(?!.*[\\/]node_modules[\\/]react-intl[\\/]).+$/,
        },
      },
    },
    chunkIds: 'total-size',
    moduleIds: 'size'
  },

  module: {
    rules: Object.keys(rules).map(key => rules[key]),
    strictExportPresence: true,
  },

  plugins: [
    new webpack.EnvironmentPlugin(JSON.parse(JSON.stringify(env))),
    new webpack.NormalModuleReplacementPlugin(
      /^history\//, (resource) => {
        // temporary fix for https://github.com/ReactTraining/react-router/issues/5576
        // to reduce bundle size
        resource.request = resource.request.replace(/^history/, 'history/es');
      },
    ),
    new MiniCssExtractPlugin({
      filename: 'css/[name].css',
    }),
    new AssetsManifestPlugin({
      integrity: true,
      integrityHashes: ['sha256'],
      entrypoints: true,
      writeToDisk: true,
      publicPath: true,
    }),
    new CircularDependencyPlugin({
      failOnError: true,
    })
  ],

  resolve: {
    extensions: settings.extensions,
    modules: [
      resolve(settings.source_path),
      'node_modules',
    ],
  },

  resolveLoader: {
    modules: ['node_modules'],
  },
};