uniworx.de/frontend/webpack.config.js

125 lines
3.2 KiB
JavaScript

// Generated using webpack-cli https://github.com/webpack/webpack-cli
const path = require("path");
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
const TerserPlugin = require('terser-webpack-plugin');
const postcssPresetEnv = require('postcss-preset-env');
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const yaml = require('js-yaml');
const stylesHandler = MiniCssExtractPlugin.loader;
const webpackVersion = require('webpack/package.json').version.split('.').slice(0, 2).join('.');
const config = {
mode: 'production',
devtool: 'source-map',
entry: {
main: [ path.resolve(__dirname, "src", "index.js")
]
},
output: {
chunkFilename: '[chunkhash].js',
filename: '[chunkhash].js',
path: path.resolve(__dirname, 'dist', `wp-${webpackVersion}`),
// publicPath: `/wp-${webpackVersion}/`,
publicPath: `./`,
hashFunction: 'shake256',
hashDigestLength: 36
},
plugins: [
new WebpackManifestPlugin({
fileName: path.resolve(__dirname, 'dist', '.manifest.yaml'),
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.dump
}),
new MiniCssExtractPlugin({
filename: '[chunkhash].css',
chunkFilename: '[chunkhash].css',
}),
],
module: {
rules: [
{
loader: 'babel-loader',
options: {
plugins: ['syntax-dynamic-import'],
presets: [
[
'@babel/preset-env',
{
modules: false,
targets: "defaults",
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,
postcssOptions: {
plugins: [ 'postcss-preset-env' ]
}
}},
{ 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,
postcssOptions: {
plugins: [ 'postcss-preset-env' ]
}
}},
{ loader: 'resolve-url-loader', options: { sourceMap: true }},
{ loader: 'sass-loader', options: { implementation: require('sass'), sourceMap: true }}
]
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?.*)?$/i,
type: 'asset'
}
]
},
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
parallel: true,
terserOptions: {
sourceMap: true
}
}),
new CssMinimizerPlugin(),
],
moduleIds: 'named',
chunkIds: 'named',
runtimeChunk: 'single',
realContentHash: false,
splitChunks: {
chunks: 'all',
},
},
};
module.exports = config;