244 lines
5.8 KiB
JavaScript
244 lines
5.8 KiB
JavaScript
/**
|
|
* This is an old webpack config that uses ttag-webpack-plugin
|
|
* Sadly this plugin has issues with webpack 5, so we can't use it.
|
|
* But we keep this config around, so that we can adjust in the case it
|
|
* might become stable.
|
|
*
|
|
* https://github.com/ttag-org/ttag-webpack-plugin/issues
|
|
*/
|
|
|
|
import fs from 'fs';
|
|
import path from 'path';
|
|
import webpack from 'webpack';
|
|
import AssetsPlugin from 'assets-webpack-plugin';
|
|
import TtagWebpackPlugin from 'ttag-webpack-plugin';
|
|
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
|
|
|
|
import pkg from './package.json';
|
|
|
|
const isDebug = process.argv.includes('--debug');
|
|
const VERBOSE = false;
|
|
const isAnalyze = process.argv.includes('--analyze')
|
|
|| process.argv.includes('--analyse');
|
|
|
|
// activate for deprecation tracking
|
|
// process.traceDeprecation = true;
|
|
|
|
const babelPlugins = [
|
|
'@babel/transform-flow-strip-types',
|
|
['@babel/plugin-proposal-decorators', { legacy: true }],
|
|
'@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', { loose: true }],
|
|
'@babel/proposal-object-rest-spread',
|
|
// react-optimize
|
|
'@babel/transform-react-constant-elements',
|
|
'@babel/transform-react-inline-elements',
|
|
'transform-react-remove-prop-types',
|
|
'transform-react-pure-class-to-function',
|
|
];
|
|
|
|
/*
|
|
* get all available languages
|
|
*/
|
|
const langDir = path.resolve(__dirname, 'i18n');
|
|
const langs = fs.readdirSync(langDir)
|
|
.filter((e) => e.endsWith('.po'))
|
|
.map((l) => l.slice(0, -3));
|
|
|
|
/*
|
|
* create list of translations for ttag-webpack-plugin
|
|
*/
|
|
const translations = {};
|
|
for (let i = 0; i < langs.length; i += 1) {
|
|
const lang = langs[i];
|
|
translations[lang] = path.resolve(langDir, `${lang}.po`);
|
|
}
|
|
|
|
/*
|
|
* Cache Groups for splitChunks
|
|
* (edit cache groups here, make sure that chunks is based on name)
|
|
*/
|
|
const cacheGroups = {
|
|
default: false,
|
|
defaultVendors: false,
|
|
|
|
vendor: {
|
|
name: 'vendor',
|
|
chunks: (chunk) => chunk.name === 'client',
|
|
test: /[\\/]node_modules[\\/]/,
|
|
},
|
|
three: {
|
|
name: 'three',
|
|
chunks: (chunk) => (chunk.name === 'globe' || chunk.name === 'voxel'),
|
|
test: /[\\/]node_modules[\\/]three[\\/]/,
|
|
},
|
|
};
|
|
|
|
|
|
/*
|
|
* automatically add Cache Groups for languages based on
|
|
* manually set cacheGroups
|
|
*/
|
|
const groups = Object.keys(cacheGroups);
|
|
for (let u = 0; u < groups.length; u += 1) {
|
|
const group = cacheGroups[groups[u]];
|
|
if (!group.test) continue;
|
|
|
|
for (let i = 0; i < langs.length; i += 1) {
|
|
const lang = langs[i];
|
|
/* add lang */
|
|
const key = `${groups[u]}-${lang}`;
|
|
const name = `${group.name}-${lang}`;
|
|
const { test, chunks } = group;
|
|
|
|
cacheGroups[key] = {
|
|
name,
|
|
chunks: (chunk) => {
|
|
if (!chunk.name.endsWith(`-${lang}`)) {
|
|
return false;
|
|
}
|
|
return chunks({
|
|
name: chunk.name.slice(0, -lang.length - 1),
|
|
});
|
|
},
|
|
test,
|
|
};
|
|
}
|
|
}
|
|
|
|
|
|
export default {
|
|
name: 'client',
|
|
target: 'web',
|
|
|
|
context: __dirname,
|
|
mode: (isDebug) ? 'development' : 'production',
|
|
devtool: 'source-map',
|
|
|
|
entry: {
|
|
client: ['./src/client.js'],
|
|
globe: ['./src/globe.js'],
|
|
},
|
|
|
|
output: {
|
|
path: path.resolve(__dirname, 'build', 'public', 'assets'),
|
|
publicPath: '/assets/',
|
|
pathinfo: VERBOSE,
|
|
filename: isDebug ? '[name].js' : '[name].[chunkhash:8].js',
|
|
chunkFilename: isDebug ? '[name].chunk.js' : '[name].[chunkhash:8].js',
|
|
},
|
|
|
|
resolve: {
|
|
extensions: ['.js', '.jsx', '.json', '.ts', '.tsx'],
|
|
},
|
|
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.svg$/,
|
|
use: [
|
|
{
|
|
loader: 'babel-loader',
|
|
},
|
|
{
|
|
loader: 'react-svg-loader',
|
|
options: {
|
|
svgo: {
|
|
plugins: [
|
|
{
|
|
removeViewBox: false,
|
|
},
|
|
{
|
|
removeDimensions: true,
|
|
},
|
|
],
|
|
},
|
|
jsx: false,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
test: /\.(js|jsx|ts|tsx)$/,
|
|
loader: 'babel-loader',
|
|
include: [
|
|
path.resolve(__dirname, 'src'),
|
|
],
|
|
options: {
|
|
cacheDirectory: isDebug,
|
|
babelrc: false,
|
|
presets: [
|
|
['@babel/preset-env', {
|
|
targets: {
|
|
browsers: pkg.browserslist,
|
|
},
|
|
modules: false,
|
|
useBuiltIns: 'usage',
|
|
corejs: {
|
|
version: 3,
|
|
},
|
|
debug: false,
|
|
}],
|
|
'@babel/typescript',
|
|
'@babel/react',
|
|
],
|
|
plugins: babelPlugins,
|
|
},
|
|
},
|
|
{
|
|
test: /\.css/,
|
|
use: ['style-loader',
|
|
{
|
|
loader: 'css-loader',
|
|
options: {
|
|
sourceMap: isDebug,
|
|
modules: false,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
|
|
plugins: [
|
|
// Define free variables
|
|
// https://webpack.github.io/docs/list-of-plugins.html#defineplugin
|
|
new webpack.DefinePlugin({
|
|
'process.env.NODE_ENV': isDebug ? '"development"' : '"production"',
|
|
'process.env.BROWSER': true,
|
|
}),
|
|
|
|
// make multiple bundles for each language
|
|
new TtagWebpackPlugin({
|
|
translations,
|
|
}),
|
|
|
|
// Emit a file with assets paths
|
|
// https://github.com/sporto/assets-webpack-plugin#options
|
|
new AssetsPlugin({
|
|
path: path.resolve(__dirname, 'build'),
|
|
filename: 'assets.json',
|
|
prettyPrint: true,
|
|
}),
|
|
|
|
// Webpack Bundle Analyzer
|
|
// https://github.com/th0r/webpack-bundle-analyzer
|
|
...isAnalyze ? [new BundleAnalyzerPlugin()] : [],
|
|
],
|
|
|
|
optimization: {
|
|
splitChunks: {
|
|
chunks: 'all',
|
|
name: false,
|
|
cacheGroups,
|
|
},
|
|
},
|
|
|
|
bail: !isDebug,
|
|
|
|
cache: isDebug,
|
|
};
|