261 lines
8.3 KiB
JavaScript
261 lines
8.3 KiB
JavaScript
const webpack = require('webpack');
|
|
const path = require('path');
|
|
const tmp = require('tmp');
|
|
tmp.setGracefulCleanup();
|
|
const fs = require('fs');
|
|
const glob = require('glob');
|
|
const { execSync } = require('child_process');
|
|
|
|
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
|
|
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
|
const ManifestPlugin = require('webpack-manifest-plugin');
|
|
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
|
|
const CopyPlugin = require('copy-webpack-plugin');
|
|
const TerserPlugin = require('terser-webpack-plugin');
|
|
const yaml = require('js-yaml');
|
|
const HashOutput = require('webpack-plugin-hash-output');
|
|
const postcssPresetEnv = require('postcss-preset-env');
|
|
const RemovePlugin = require('remove-files-webpack-plugin');
|
|
const RealFaviconPlugin = require('real-favicon-webpack-plugin');
|
|
|
|
const webpackVersion = require('webpack/package.json').version.split('.').slice(0, 2).join('.');
|
|
const packageVersion = require('./package.json').version;
|
|
|
|
module.exports = {
|
|
module: {
|
|
rules: [
|
|
{
|
|
loader: 'babel-loader',
|
|
|
|
options: {
|
|
plugins: ['syntax-dynamic-import'],
|
|
|
|
presets: [
|
|
[
|
|
'@babel/preset-env',
|
|
{
|
|
modules: false,
|
|
targets: {
|
|
edge: "17",
|
|
firefox: "50",
|
|
chrome: "60",
|
|
safari: "11.1",
|
|
ie: "11",
|
|
},
|
|
useBuiltIns: "usage",
|
|
corejs: 3
|
|
}
|
|
]
|
|
]
|
|
},
|
|
test: /\.js$/i,
|
|
exclude: /node_modules/,
|
|
},
|
|
{
|
|
test: /\.css$/i,
|
|
use: [ MiniCssExtractPlugin.loader,
|
|
{ loader: 'css-loader', options: { sourceMap: true }},
|
|
{ loader: 'postcss-loader', options: {
|
|
sourceMap: true,
|
|
plugins: () => [ postcssPresetEnv ]
|
|
}},
|
|
{ loader: 'resolve-url-loader', options: { sourceMap: true }}
|
|
]
|
|
},
|
|
{
|
|
test: /\.s(c|a)ss$/i,
|
|
use: [ MiniCssExtractPlugin.loader,
|
|
{ loader: 'css-loader', options: { sourceMap: true }},
|
|
{ loader: 'postcss-loader', options: {
|
|
sourceMap: true,
|
|
plugins: () => [ postcssPresetEnv ]
|
|
}},
|
|
{ loader: 'resolve-url-loader', options: { sourceMap: true }},
|
|
{ loader: 'sass-loader', options: { implementation: require('sass'), sourceMap: true }}
|
|
]
|
|
},
|
|
{
|
|
test: /\.(woff(2)?|ttf|eot|svg)(\?.*)?$/i,
|
|
use: [
|
|
{
|
|
loader: 'file-loader',
|
|
options: {
|
|
name: '[contenthash].[ext]',
|
|
esModule: false
|
|
}
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
|
|
entry: {
|
|
main: [ path.resolve(__dirname, 'frontend/src', 'polyfill.js'),
|
|
path.resolve(__dirname, 'frontend/src', 'main.js')
|
|
]
|
|
},
|
|
|
|
plugins: [
|
|
new HashOutput({
|
|
validateOutput: true,
|
|
validateOutputRegex: /static\/wp-[^\/]\//
|
|
}),
|
|
new MiniCssExtractPlugin({
|
|
// Options similar to the same options in webpackOptions.output
|
|
// all options are optional
|
|
filename: '[chunkhash].css',
|
|
chunkFilename: '[chunkhash].css',
|
|
ignoreOrder: false, // Enable to remove warnings about conflicting order
|
|
}),
|
|
new webpack.NamedChunksPlugin((chunk) => {
|
|
if (chunk.name) {
|
|
return chunk.name;
|
|
}
|
|
let modules = chunk.modules || [chunk.entryModule];
|
|
return modules.map(m => path.relative(m.context, m.request)).join("_");
|
|
}),
|
|
new webpack.NamedModulesPlugin(),
|
|
new ManifestPlugin({
|
|
fileName: path.resolve(__dirname, 'config', 'webpack.yml'),
|
|
publicPath: `wp-${webpackVersion}/`,
|
|
generate: (seed, files, entrypoints) => Object.keys(entrypoints).reduce((acc, fs) => ({...acc, [fs]: files.filter(file => entrypoints[fs].filter(basename => !(/\.map$/.test(basename))).some(basename => file.path.endsWith(basename))).filter(file => file.isInitial).map(file => file.path)}), {}),
|
|
serialize: yaml.safeDump
|
|
}),
|
|
new CleanWebpackPlugin({
|
|
cleanOnceBeforeBuildPatterns: [ path.resolve(__dirname, 'static'),
|
|
path.resolve(__dirname, 'well-known'),
|
|
]
|
|
}),
|
|
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
|
|
new CopyPlugin([
|
|
{ from: 'assets/lmu/sigillum.svg', to: path.resolve(__dirname, 'static', 'img/lmu/sigillum.svg') },
|
|
]),
|
|
new webpack.DefinePlugin({
|
|
VERSION: JSON.stringify(packageVersion)
|
|
}),
|
|
...(() => {
|
|
const faviconJson = require('./config/favicon.json');
|
|
const langs = new Set();
|
|
function findLangs(json) {
|
|
if (json && json._i18n) {
|
|
Object.keys(json).forEach(key => {
|
|
if (key !== '_i18n') {
|
|
langs.add(key);
|
|
}
|
|
})
|
|
} else if (Array.isArray(json)) {
|
|
json.forEach(elem => findLangs(elem));
|
|
} else if (typeof json === 'object') {
|
|
Object.keys(json).forEach(key => findLangs(json[key]));
|
|
}
|
|
}
|
|
findLangs(faviconJson);
|
|
|
|
function selectLang(lang, json) {
|
|
if (json && json._i18n) {
|
|
return json[lang];
|
|
} else if (Array.isArray(json)) {
|
|
return json.map(elem => selectLang(lang, elem));
|
|
} else if (typeof json === 'object') {
|
|
return Object.fromEntries(Object.entries(json).map(([k, v]) => [k, selectLang(lang, v)]));
|
|
} else {
|
|
return json;
|
|
}
|
|
}
|
|
|
|
const langJsons = {};
|
|
Array.from(langs).forEach(lang => {
|
|
langJsons[lang] = selectLang(lang, faviconJson);
|
|
});
|
|
|
|
return Array.from(langs).map(lang => {
|
|
const tmpobj = tmp.fileSync({ dir: ".", postfix: ".json" });
|
|
fs.writeSync(tmpobj.fd, JSON.stringify(langJsons[lang]));
|
|
fs.close(tmpobj.fd);
|
|
|
|
return [
|
|
new RealFaviconPlugin({
|
|
faviconJson: `./${tmpobj.name}`,
|
|
outputPath: path.resolve(__dirname, 'well-known', lang),
|
|
inject: false
|
|
}),
|
|
new CopyPlugin([
|
|
{ from: 'config/robots.txt', to: path.resolve(__dirname, 'well-known', lang, 'robots.txt') },
|
|
])
|
|
];
|
|
}).flat(1);
|
|
})(),
|
|
{ apply: compiler => compiler.hooks.afterEmit.tap('AfterEmitPlugin', compilation => {
|
|
const imgFiles = glob.sync(path.resolve(__dirname, 'well-known', '**', '*.@(png)'));
|
|
const imgFilesArgs = Array.from(imgFiles).join(" ");
|
|
execSync(`exiftool -overwrite_original -all= ${imgFilesArgs}`, { stdio: 'inherit' });
|
|
})
|
|
}
|
|
],
|
|
|
|
output: {
|
|
chunkFilename: '[chunkhash].js',
|
|
filename: '[chunkhash].js',
|
|
path: path.resolve(__dirname, 'static', `wp-${webpackVersion}`),
|
|
publicPath: `/static/res/wp-${webpackVersion}/`,
|
|
hashFunction: 'shake256',
|
|
hashDigestLength: 36
|
|
},
|
|
|
|
optimization: {
|
|
minimize: true,
|
|
minimizer: [
|
|
new TerserPlugin({
|
|
cache: true,
|
|
parallel: true,
|
|
sourceMap: true
|
|
}),
|
|
new OptimizeCSSAssetsPlugin({
|
|
cssProcessorOptions: {
|
|
map: {
|
|
inline: false
|
|
}
|
|
}
|
|
})
|
|
],
|
|
runtimeChunk: 'single',
|
|
splitChunks: {
|
|
chunks: 'all',
|
|
maxInitialRequests: Infinity,
|
|
maxAsyncRequests: Infinity,
|
|
minSize: 0,
|
|
minChunks: 1,
|
|
cacheGroups: {
|
|
vendor: {
|
|
test(module, chunk) {
|
|
return module.context.match(/[\\/]node_modules[\\/]/);
|
|
},
|
|
name(module, chunks, cacheGroupKey) {
|
|
const moduleFileName = module.identifier().split('/').reduceRight(item => item);
|
|
const allChunksNames = chunks.map((item) => item.name).join('~');
|
|
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
|
|
|
|
return `${cacheGroupKey}-${packageName}-${allChunksNames}-${moduleFileName}`;
|
|
},
|
|
priority: -10
|
|
},
|
|
default: {
|
|
priority: -20,
|
|
minChunks: 1
|
|
}
|
|
}
|
|
},
|
|
moduleIds: 'hashed'
|
|
},
|
|
|
|
mode: 'production',
|
|
|
|
recordsPath: path.join(__dirname, 'records.json'),
|
|
|
|
performance: {
|
|
assetFilter: (assetFilename) => !(/\.(map|svg|ttf|eot)$/.test(assetFilename))
|
|
},
|
|
|
|
devtool: 'source-map'
|
|
};
|