IMPR: Add optional configuration values

This commit is contained in:
Tony Air 2022-01-31 14:01:42 +02:00
parent 2e36f2f048
commit 9684f37a98
5 changed files with 145 additions and 137 deletions

View File

@ -18,4 +18,6 @@ A2nt\CMSNiceties\Templates\WebpackTemplateProvider:
injectClient: true injectClient: true
GRAPHQL_URL: '/graphql' GRAPHQL_URL: '/graphql'
GRAPHQL_API_KEY: 'LgPaRkVPYa8IY7x3AjbLC8wx6oPPSlO01yPflFXecvQ' GRAPHQL_API_KEY: 'LgPaRkVPYa8IY7x3AjbLC8wx6oPPSlO01yPflFXecvQ'
PROCESS_CSS: true # Deep CSS minification
JQUERY: false # We don't use jQuery, otherwise it's aliassed and being loaded externaly
#STATIC_URL: 'http://127.0.0.1' #STATIC_URL: 'http://127.0.0.1'

View File

@ -36,9 +36,9 @@
"dependencies": { "dependencies": {
"@a2nt/meta-lightbox-js": "^4.1.7", "@a2nt/meta-lightbox-js": "^4.1.7",
"@a2nt/ss-bootstrap-ui-webpack-boilerplate-react": "^4.4.6", "@a2nt/ss-bootstrap-ui-webpack-boilerplate-react": "^4.4.6",
"@angular/common": "^13.1.2", "@angular/common": "^13.2.0",
"@angular/core": "^13.1.2", "@angular/core": "^13.2.0",
"@apollo/client": "^3.5.7", "@apollo/client": "^3.5.8",
"@jsanahuja/instagramfeed": "github:jsanahuja/instagramfeed", "@jsanahuja/instagramfeed": "github:jsanahuja/instagramfeed",
"@popperjs/core": "^2.11.2", "@popperjs/core": "^2.11.2",
"@turf/clone": "^6.5.0", "@turf/clone": "^6.5.0",
@ -50,7 +50,7 @@
"@turf/meta": "^6.5.0", "@turf/meta": "^6.5.0",
"aos": "^2.3.4", "aos": "^2.3.4",
"apollo3-cache-persist": "^0.13.0", "apollo3-cache-persist": "^0.13.0",
"axios": "^0.24.0", "axios": "^0.25.0",
"balanced-match": "^2.0.0", "balanced-match": "^2.0.0",
"bootbox": "^5.5.2", "bootbox": "^5.5.2",
"bootstrap": "^5.1.3", "bootstrap": "^5.1.3",
@ -59,7 +59,7 @@
"density-clustering": "^1.3.0", "density-clustering": "^1.3.0",
"fast-deep-equal": "^3.1.3", "fast-deep-equal": "^3.1.3",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"graphql": "^16.2.0", "graphql": "^16.3.0",
"hammerjs": "^2.0.8", "hammerjs": "^2.0.8",
"inputmask": "^5.0.7", "inputmask": "^5.0.7",
"kdbush": "^3.0.0", "kdbush": "^3.0.0",
@ -87,16 +87,16 @@
}, },
"devDependencies": { "devDependencies": {
"@a2nt/image-sprite-webpack-plugin": "^0.2.5", "@a2nt/image-sprite-webpack-plugin": "^0.2.5",
"@babel/core": "^7.16.7", "@babel/core": "^7.16.12",
"@babel/eslint-parser": "^7.16.5", "@babel/eslint-parser": "^7.16.5",
"@babel/plugin-proposal-class-properties": "^7.16.7", "@babel/plugin-proposal-class-properties": "^7.16.7",
"@babel/plugin-proposal-object-rest-spread": "^7.16.7", "@babel/plugin-proposal-object-rest-spread": "^7.16.7",
"@babel/plugin-syntax-jsx": "^7.16.7", "@babel/plugin-syntax-jsx": "^7.16.7",
"@babel/plugin-syntax-top-level-await": "^7.14.5", "@babel/plugin-syntax-top-level-await": "^7.14.5",
"@babel/plugin-transform-react-jsx": "^7.16.7", "@babel/plugin-transform-react-jsx": "^7.16.7",
"@babel/plugin-transform-runtime": "^7.16.8", "@babel/plugin-transform-runtime": "^7.16.10",
"@babel/plugin-transform-typescript": "^7.16.8", "@babel/plugin-transform-typescript": "^7.16.8",
"@babel/preset-env": "^7.16.8", "@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7", "@babel/preset-react": "^7.16.7",
"@babel/runtime": "^7.16.7", "@babel/runtime": "^7.16.7",
"@googlemaps/markerclusterer": "*", "@googlemaps/markerclusterer": "*",
@ -112,12 +112,12 @@
"autoprefixer": "^10.4.2", "autoprefixer": "^10.4.2",
"babel-loader": "^8.2.3", "babel-loader": "^8.2.3",
"classnames": "^2.3.1", "classnames": "^2.3.1",
"copy-webpack-plugin": "^10.2.0", "copy-webpack-plugin": "^10.2.4",
"croppie": "^2.6.5", "croppie": "^2.6.5",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"css-loader": "^6.5.1", "css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.3.1", "css-minimizer-webpack-plugin": "^3.4.1",
"eslint": "^8.6.0", "eslint": "^8.8.0",
"eslint-plugin-import": "^2.25.4", "eslint-plugin-import": "^2.25.4",
"eslint-plugin-jquery": "^1.5.1", "eslint-plugin-jquery": "^1.5.1",
"eslint-plugin-react": "^7.28.0", "eslint-plugin-react": "^7.28.0",
@ -135,14 +135,14 @@
"html-dom-parser": "^1.0.4", "html-dom-parser": "^1.0.4",
"html-entities": "^2.3.2", "html-entities": "^2.3.2",
"html-loader": "^3.1.0", "html-loader": "^3.1.0",
"html-react-parser": "^1.4.5", "html-react-parser": "^1.4.6",
"html-webpack-plugin": "^5.5.0", "html-webpack-plugin": "^5.5.0",
"img-optimize-loader": "^1.0.7", "img-optimize-loader": "^1.0.7",
"js-yaml": "^4.1.0", "js-yaml": "^4.1.0",
"loglevel": "^1.8.0", "loglevel": "^1.8.0",
"mini-css-extract-plugin": "^2.5.0", "mini-css-extract-plugin": "^2.5.3",
"msw": "^0.36.4", "msw": "^0.36.8",
"node-fetch": "^3.1.0", "node-fetch": "^3.2.0",
"object-assign": "^4.1.1", "object-assign": "^4.1.1",
"optimism": "^0.16.1", "optimism": "^0.16.1",
"optimize-css-assets-webpack-plugin": "^6.0.1", "optimize-css-assets-webpack-plugin": "^6.0.1",
@ -155,7 +155,7 @@
"react-is": "^17.0.2", "react-is": "^17.0.2",
"react-lifecycles-compat": "^3.0.4", "react-lifecycles-compat": "^3.0.4",
"regenerator-runtime": "^0.13.9", "regenerator-runtime": "^0.13.9",
"resolve-url-loader": "^4.0.0", "resolve-url-loader": "^5.0.0",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"routie": "0.0.1", "routie": "0.0.1",
"sass": "*", "sass": "*",
@ -175,9 +175,9 @@
"tslib": "^2.3.1", "tslib": "^2.3.1",
"url": "^0.11.0", "url": "^0.11.0",
"url-loader": "^4.1.1", "url-loader": "^4.1.1",
"webpack": "^5.66.0", "webpack": "^5.67.0",
"webpack-bundle-analyzer": "^4.5.0", "webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.9.1", "webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.3", "webpack-dev-server": "^4.7.3",
"webpack-manifest-plugin": "^4.1.1", "webpack-manifest-plugin": "^4.1.1",
"webpack-merge": "^5.8.0", "webpack-merge": "^5.8.0",

View File

@ -153,30 +153,38 @@ const JSVARS = {
BASE_HREF: JSON.stringify(''), BASE_HREF: JSON.stringify(''),
}; };
const provides = {};
const externals = {};
const aliases = {};
if (!conf['JQUERY']) {
provides['react'] = 'React';
provides['react-dom'] = 'ReactDOM';
externals['react'] = 'React';
externals['react-dom'] = 'ReactDOM';
} else {
provides['$'] = 'jquery';
provides['jQuery'] = 'jquery';
externals['jquery'] = 'jQuery';
aliases['window.jQuery'] = require.resolve('jquery');
aliases['$'] = require.resolve('jquery');
aliases['jquery'] = require.resolve('jquery');
aliases['jQuery'] = require.resolve('jquery');
}
module.exports = { module.exports = {
PROVIDES: provides,
JSVARS: JSVARS, JSVARS: JSVARS,
configuration: conf, configuration: conf,
themes: themes, themes: themes,
webpack: { webpack: {
entry: includes, entry: includes,
externals: { externals: externals,
// comment out jQuery if you don't use it to prevent bootstrap thinking that there's jQuery present
//jquery: 'jQuery',
react: 'React',
'react-dom': 'ReactDOM',
},
resolve: { resolve: {
modules: modules, modules: modules,
extensions: ['.tsx', '.ts', '.js'], extensions: ['.tsx', '.ts', '.js'],
alias: { alias: aliases,
// comment out jQuery if you don't use it to prevent bootstrap thinking that there's jQuery present
/*'window.jQuery': require.resolve('jquery'),
$: require.resolve('jquery'),
jquery: require.resolve('jquery'),
jQuery: require.resolve('jquery'),
react: require.resolve('react'),
'react-dom': require.resolve('react-dom'),*/
},
fallback: { fallback: {
path: false, path: false,
}, },

View File

@ -16,7 +16,7 @@ const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const { default: MiniCssExtractPlugin } = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//const ImageSpritePlugin = require('@a2nt/image-sprite-webpack-plugin'); //const ImageSpritePlugin = require('@a2nt/image-sprite-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
@ -27,13 +27,8 @@ const COMPRESS = NODE_ENV === 'production' ? true : false;
const IP = process.env.IP || conf.HOSTNAME; const IP = process.env.IP || conf.HOSTNAME;
const PORT = process.env.PORT || conf.PORT; const PORT = process.env.PORT || conf.PORT;
let plugins = [ const plugins = [
new webpack.ProvidePlugin({ new webpack.ProvidePlugin(common['PROVIDES']),
react: 'React',
'react-dom': 'ReactDOM',
/*$: 'jquery',
jQuery: 'jquery',*/
}),
new webpack.DefinePlugin(common['JSVARS']), new webpack.DefinePlugin(common['JSVARS']),
new webpack.LoaderOptionsPlugin({ new webpack.LoaderOptionsPlugin({
minimize: COMPRESS, minimize: COMPRESS,
@ -46,24 +41,6 @@ let plugins = [
}), }),
]; ];
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,
}),
);*/
}
const indexPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'index.html'); const indexPath = path.join(__dirname, conf.APPDIR, conf.SRC, 'index.html');
if (fs.existsSync(indexPath)) { if (fs.existsSync(indexPath)) {
plugins.push( plugins.push(
@ -149,30 +126,8 @@ common.themes.forEach((theme) => {
} }
}); });
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer') const minimizers = [];
.BundleAnalyzerPlugin; minimizers.push(
plugins.push(
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
}),
);
const cfg = merge(common.webpack, {
mode: NODE_ENV,
cache: {
type: 'filesystem',
},
recordsPath: path.join(__dirname, conf.APPDIR, conf.DIST, 'records.json'),
optimization: {
//removeAvailableModules: false,
//realContentHash: false,
splitChunks: {
name: 'vendor',
minChunks: 2,
},
concatenateModules: true, //ModuleConcatenationPlugin
minimizer: [
new TerserPlugin({ new TerserPlugin({
terserOptions: { terserOptions: {
module: false, module: false,
@ -213,7 +168,11 @@ const cfg = merge(common.webpack, {
// Use multi-process parallel running to improve the build speed // Use multi-process parallel running to improve the build speed
// Default number of concurrent runs: os.cpus().length - 1 // Default number of concurrent runs: os.cpus().length - 1
parallel: true, parallel: true,
}), })
);
if (conf['PROCESS_CSS']) {
minimizers.push(
new CssMinimizerPlugin({ new CssMinimizerPlugin({
parallel: true, parallel: true,
minimizerOptions: [{ minimizerOptions: [{
@ -239,8 +198,52 @@ const cfg = merge(common.webpack, {
CssMinimizerPlugin.cssnanoMinify, CssMinimizerPlugin.cssnanoMinify,
//CssMinimizerPlugin.cleanCssMinify, //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,
}), }),
], );*/
}
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
.BundleAnalyzerPlugin;
plugins.push(
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false,
}),
);
const cfg = merge(common.webpack, {
mode: NODE_ENV,
cache: {
type: 'filesystem',
},
recordsPath: path.join(__dirname, conf.APPDIR, conf.DIST, 'records.json'),
optimization: {
//removeAvailableModules: false,
//realContentHash: false,
splitChunks: {
name: 'vendor',
minChunks: 2,
},
concatenateModules: true, //ModuleConcatenationPlugin
minimizer: minimizers,
}, },
output: { output: {

View File

@ -13,7 +13,7 @@ const {
merge, merge,
} = require('webpack-merge'); } = require('webpack-merge');
const { default: MiniCssExtractPlugin } = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin');
const IP = process.env.IP || conf.HOSTNAME; const IP = process.env.IP || conf.HOSTNAME;
@ -23,12 +23,7 @@ const NODE_ENV = 'development'; //conf.NODE_ENV || process.env.NODE_ENV;
const COMPRESS = NODE_ENV === 'production' ? true : false; const COMPRESS = NODE_ENV === 'production' ? true : false;
const plugins = [ const plugins = [
new webpack.ProvidePlugin({ new webpack.ProvidePlugin(common['PROVIDES']),
react: 'React',
'react-dom': 'ReactDOM',
/*$: 'jquery',
jQuery: 'jquery',*/
}),
new webpack.DefinePlugin(common['JSVARS']), new webpack.DefinePlugin(common['JSVARS']),
//new webpack.HotModuleReplacementPlugin(), //new webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin(), new MiniCssExtractPlugin(),
@ -113,7 +108,7 @@ const config = merge(common.webpack, {
options: { options: {
sourceMap: true, sourceMap: true,
}, },
},], }, ],
}, },
{ {
test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
@ -122,7 +117,7 @@ const config = merge(common.webpack, {
{ {
test: /\.(gif|png|jpg|jpeg|ttf|otf|eot|svg|webp|woff(2)?)$/, test: /\.(gif|png|jpg|jpeg|ttf|otf|eot|svg|webp|woff(2)?)$/,
type: 'asset/resource', type: 'asset/resource',
},], }, ],
}, },
plugins: plugins, plugins: plugins,