silverstripe-webpack/webpack.config.js

364 lines
11 KiB
JavaScript
Raw Normal View History

2020-12-25 00:18:14 +01:00
/*
* Production assets generation
*/
2021-05-03 19:11:13 +02:00
const common = require('./webpack.config.common.js');
const conf = common.configuration;
2020-12-25 00:18:14 +01:00
const webpack = require('webpack');
2021-08-03 03:22:09 +02:00
const {
2021-09-12 22:50:08 +02:00
merge,
2021-08-03 03:22:09 +02:00
} = require('webpack-merge');
2020-12-25 00:18:14 +01:00
2021-05-03 19:11:13 +02:00
const fs = require('fs');
2020-12-25 00:18:14 +01:00
const path = require('path');
2020-12-28 01:32:09 +01:00
const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
2020-12-25 00:18:14 +01:00
const TerserPlugin = require('terser-webpack-plugin');
2021-05-03 19:11:13 +02:00
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
2020-12-25 00:18:14 +01:00
2021-05-03 19:11:13 +02:00
//const ImageSpritePlugin = require('@a2nt/image-sprite-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
2022-05-27 18:08:09 +02:00
const WebpackBuildNotifications = require('webpack-build-notifications');
2020-12-25 00:18:14 +01:00
const NODE_ENV = conf.NODE_ENV || process.env.NODE_ENV;
const COMPRESS = NODE_ENV === 'production' ? true : false;
const IP = process.env.IP || conf.HOSTNAME;
const PORT = process.env.PORT || conf.PORT;
2020-12-25 00:18:14 +01:00
const plugins = [
new webpack.ProvidePlugin(common['PROVIDES']),
new webpack.DefinePlugin(common['JSVARS']),
2021-04-28 17:34:53 +02:00
new webpack.LoaderOptionsPlugin({
minimize: COMPRESS,
debug: !COMPRESS,
2021-09-12 22:50:08 +02:00
}),
2021-04-28 17:34:53 +02:00
new MiniCssExtractPlugin({
2021-10-10 17:00:45 +02:00
experimentalUseImportModule: false,
filename: 'css/[name].css',
//allChunks: true,
}),
2022-05-27 18:08:09 +02:00
new WebpackBuildNotifications({
title: common['JSVARS']['UINAME'] + ' ' + common['JSVARS']['UIVERSION'],
logo: path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png'),
suppressWarning: true,
}),
2020-12-25 00:18:14 +01:00
];
const indexPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'index.html');
2021-05-03 19:11:13 +02:00
if (fs.existsSync(indexPath)) {
2021-09-12 22:50:08 +02:00
plugins.push(
new HtmlWebpackPlugin({
publicPath: '',
template: path.join(conf.APPDIR, conf.SRC, 'index.html'),
templateParameters: {
NODE_ENV: NODE_ENV,
GRAPHQL_URL: conf['GRAPHQL_URL'],
STATIC_URL: conf['STATIC_URL'],
REACT_SCRIPTS: NODE_ENV === 'production' ?
'<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>' : '<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script><script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>',
2021-04-28 17:34:53 +02:00
},
2021-09-12 22:50:08 +02:00
xhtml: true,
2021-04-28 17:34:53 +02:00
}),
2021-09-12 22:50:08 +02:00
);
}
2020-12-28 01:32:09 +01:00
const faviconPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'favicon.png');
2021-05-03 19:11:13 +02:00
if (fs.existsSync(faviconPath)) {
2021-09-12 22:50:08 +02:00
plugins.push(
new FaviconsWebpackPlugin({
title: 'Webpack App',
logo: faviconPath,
prefix: '/icons/',
emitStats: false,
persistentCache: true,
inject: false,
statsFilename: path.join(
conf.APPDIR,
conf.DIST,
'icons',
'iconstats.json',
),
icons: {
android: true,
appleIcon: true,
appleStartup: true,
coast: true,
favicons: true,
firefox: true,
opengraph: true,
twitter: true,
yandex: true,
windows: true,
2021-04-28 17:34:53 +02:00
},
}),
2021-09-12 22:50:08 +02:00
);
2020-12-25 00:18:14 +01:00
}
// add themes favicons
2021-05-03 19:11:13 +02:00
common.themes.forEach((theme) => {
2021-04-28 17:34:53 +02:00
const faviconPath = path.join(__dirname, theme, conf.SRC, 'favicon.png');
2021-05-03 19:11:13 +02:00
if (fs.existsSync(faviconPath)) {
2021-09-12 22:50:08 +02:00
plugins.push(
new FaviconsWebpackPlugin({
title: 'Webpack App',
logo: faviconPath,
prefix: '/' + theme + '-icons/',
emitStats: false,
persistentCache: true,
inject: false,
statsFilename: path.join(
conf.APPDIR,
conf.DIST,
theme + '-icons',
'iconstats.json',
),
icons: {
android: true,
appleIcon: true,
appleStartup: true,
coast: true,
favicons: true,
firefox: true,
opengraph: true,
twitter: true,
yandex: true,
windows: true,
2021-04-28 17:34:53 +02:00
},
}),
2021-09-12 22:50:08 +02:00
);
2021-04-28 17:34:53 +02:00
}
2021-09-12 22:50:08 +02:00
});
2020-12-25 00:18:14 +01:00
const minimizers = [];
minimizers.push(
new TerserPlugin({
terserOptions: {
module: false,
parse: {
// we want terser to parse ecma 8 code. However, we don't want it
// to apply any minfication steps that turns valid ecma 5 code
// into invalid ecma 5 code. This is why the 'compress' and 'output'
// sections only apply transformations that are ecma 5 safe
// https://github.com/facebook/create-react-app/pull/4234
ecma: 8,
},
compress: {
ecma: 6,
warnings: false,
// Disabled because of an issue with Uglify breaking seemingly valid code:
// https://github.com/facebook/create-react-app/issues/2376
// Pending further investigation:
// https://github.com/mishoo/UglifyJS2/issues/2011
comparisons: false,
},
keep_fnames: true,
keep_classnames: true,
mangle: {
safari10: true,
keep_fnames: true,
keep_classnames: true,
reserved: ['$', 'jQuery', 'jquery'],
},
output: {
2023-01-10 20:59:09 +01:00
ecma: 6,
comments: false,
// Turned on because emoji and regex is not minified properly using default
// https://github.com/facebook/create-react-app/issues/2488
ascii_only: true,
},
},
// Use multi-process parallel running to improve the build speed
// Default number of concurrent runs: os.cpus().length - 1
parallel: true,
})
);
if (conf['PROCESS_CSS']) {
minimizers.push(
new CssMinimizerPlugin({
parallel: true,
minimizerOptions: [{
preset: [
'default',
{
discardComments: {
removeAll: true,
},
zindex: true,
cssDeclarationSorter: true,
reduceIdents: false,
mergeIdents: true,
mergeRules: true,
mergeLonghand: true,
discardUnused: true,
discardOverridden: true,
discardDuplicates: true,
},
],
},],
minify: [
CssMinimizerPlugin.cssnanoMinify,
//CssMinimizerPlugin.cleanCssMinify,
],
})
);
}
if (COMPRESS) {
plugins.push(require('autoprefixer'));
/*plugins.push(
new ImageSpritePlugin({
exclude: /exclude|original|default-|icons|sprite|svg|logo|favicon/,
commentOrigin: false,
compress: COMPRESS,
extensions: ['png'],
indent: '',
log: true,
//outputPath: path.join(__dirname, conf.APPDIR, conf.DIST),
outputFilename: 'img/sprite-[hash].png',
padding: 0,
}),
);*/
}
2021-01-14 19:27:03 +01:00
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
2021-04-28 17:34:53 +02:00
.BundleAnalyzerPlugin;
2021-01-14 19:27:03 +01:00
plugins.push(
2021-04-28 17:34:53 +02:00
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
2021-09-12 22:50:08 +02:00
}),
2021-01-14 19:27:03 +01:00
);
2021-05-03 19:11:13 +02:00
const cfg = merge(common.webpack, {
2021-04-28 17:34:53 +02:00
mode: NODE_ENV,
cache: {
type: 'filesystem',
2021-09-12 22:50:08 +02:00
},
2021-04-28 17:34:53 +02:00
recordsPath: path.join(__dirname, conf.APPDIR, conf.DIST, 'records.json'),
optimization: {
//removeAvailableModules: false,
//realContentHash: false,
splitChunks: {
name: 'vendor',
minChunks: 2,
2021-09-12 22:50:08 +02:00
},
2021-04-28 17:34:53 +02:00
concatenateModules: true, //ModuleConcatenationPlugin
minimizer: minimizers,
2021-09-12 22:50:08 +02:00
},
2020-12-25 00:18:14 +01:00
2021-04-28 17:34:53 +02:00
output: {
2021-08-03 03:22:09 +02:00
publicPath: path.join(conf.APPDIR, conf.DIST) + '/',
path: path.join(__dirname, conf.APPDIR, conf.DIST) + '/',
2021-04-28 17:34:53 +02:00
filename: path.join('js', '[name].js'),
2021-09-12 22:50:08 +02:00
},
2020-12-25 00:18:14 +01:00
2021-04-28 17:34:53 +02:00
module: {
2021-09-13 00:24:40 +02:00
rules: [{
test: /\.(js|ts)x?$/,
2021-08-03 03:22:09 +02:00
//exclude: /node_modules/,
use: {
loader: 'babel-loader', //'@sucrase/webpack-loader',
options: {
//transforms: ['jsx']
presets: [
'@babel/preset-env',
'@babel/react',
{
plugins: [
'@babel/plugin-proposal-class-properties',
],
2021-09-12 22:50:08 +02:00
},
2021-08-03 03:22:09 +02:00
], //Preset used for env setup
plugins: [
2021-09-13 00:24:40 +02:00
'@babel/plugin-transform-typescript',
'@babel/transform-react-jsx',
2021-08-03 03:22:09 +02:00
],
cacheDirectory: true,
cacheCompression: true,
2021-09-12 22:50:08 +02:00
},
},
},
2021-08-03 03:22:09 +02:00
{
test: /\.s?css$/,
use: [{
loader: MiniCssExtractPlugin.loader,
options: {
2021-09-12 22:50:08 +02:00
publicPath: '../',
},
},
2021-08-03 03:22:09 +02:00
{
2021-09-13 00:24:40 +02:00
loader: 'css-loader',
options: {
sourceMap: true,
},
},
2021-08-03 03:22:09 +02:00
{
loader: 'sass-loader',
2021-04-28 17:34:53 +02:00
options: {
2021-09-12 22:50:08 +02:00
sourceMap: true,
},
},
2021-08-03 03:22:09 +02:00
],
2021-09-12 22:50:08 +02:00
},
2021-08-03 03:22:09 +02:00
{
test: /fontawesome([^.]+).(ttf|otf|eot|woff(2)?)(\?[a-z0-9]+)?$/,
2021-09-12 22:50:08 +02:00
type: 'asset/resource',
},
2021-08-03 03:22:09 +02:00
{
test: /\.(ttf|otf|eot|woff(2)?)$/,
2021-09-12 22:50:08 +02:00
type: 'asset/resource',
}, {
2021-08-03 03:22:09 +02:00
test: /\.(png|webp|jpg|jpeg|gif|svg)$/,
2021-09-12 22:50:08 +02:00
type: 'javascript/auto',
2021-08-03 03:22:09 +02:00
use: [
2021-04-28 17:34:53 +02:00
{
2021-08-03 03:22:09 +02:00
loader: 'img-optimize-loader',
options: {
name: '[name].[ext]',
outputPath: 'img/',
publicPath: '../img/',
compress: {
// This will take more time and get smaller images.
mode: 'low', // 'lossless', 'high', 'low'
disableOnDevelopment: true,
webp: conf['webp'],
// loseless compression for png
optipng: {
optimizationLevel: 4,
2021-09-12 22:50:08 +02:00
},
2021-08-03 03:22:09 +02:00
// lossy compression for png. This will generate smaller file than optipng.
pngquant: {
quality: [0.2, 0.8],
2021-09-12 22:50:08 +02:00
},
2021-08-03 03:22:09 +02:00
// Compression for svg.
svgo: true,
// Compression for gif.
gifsicle: {
optimizationLevel: 3,
2021-09-12 22:50:08 +02:00
},
2021-08-03 03:22:09 +02:00
// Compression for jpg.
mozjpeg: {
progressive: true,
quality: 60,
2021-09-12 22:50:08 +02:00
},
},
2021-08-03 03:22:09 +02:00
inline: {
limit: 1,
2021-09-12 22:50:08 +02:00
},
},
2022-01-15 13:49:49 +01:00
},],
},],
2021-09-12 22:50:08 +02:00
},
2020-12-25 00:18:14 +01:00
2021-04-28 17:34:53 +02:00
plugins: plugins,
2021-09-12 22:50:08 +02:00
});
2020-12-25 00:18:14 +01:00
console.log(cfg);
module.exports = cfg;