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
GRAPHQL_URL: '/graphql'
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'

View File

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

View File

@ -153,30 +153,38 @@ const JSVARS = {
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 = {
PROVIDES: provides,
JSVARS: JSVARS,
configuration: conf,
themes: themes,
webpack: {
entry: includes,
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',
},
externals: externals,
resolve: {
modules: modules,
extensions: ['.tsx', '.ts', '.js'],
alias: {
// 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'),*/
},
alias: aliases,
fallback: {
path: false,
},

View File

@ -16,7 +16,7 @@ const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
const TerserPlugin = require('terser-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 HtmlWebpackPlugin = require('html-webpack-plugin');
@ -27,13 +27,8 @@ const COMPRESS = NODE_ENV === 'production' ? true : false;
const IP = process.env.IP || conf.HOSTNAME;
const PORT = process.env.PORT || conf.PORT;
let plugins = [
new webpack.ProvidePlugin({
react: 'React',
'react-dom': 'ReactDOM',
/*$: 'jquery',
jQuery: 'jquery',*/
}),
const plugins = [
new webpack.ProvidePlugin(common['PROVIDES']),
new webpack.DefinePlugin(common['JSVARS']),
new webpack.LoaderOptionsPlugin({
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');
if (fs.existsSync(indexPath)) {
plugins.push(
@ -149,30 +126,8 @@ common.themes.forEach((theme) => {
}
});
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: [
const minimizers = [];
minimizers.push(
new TerserPlugin({
terserOptions: {
module: false,
@ -213,7 +168,11 @@ const cfg = merge(common.webpack, {
// 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: [{
@ -239,8 +198,52 @@ const cfg = merge(common.webpack, {
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,
}),
],
);*/
}
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: {

View File

@ -13,7 +13,7 @@ const {
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 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 plugins = [
new webpack.ProvidePlugin({
react: 'React',
'react-dom': 'ReactDOM',
/*$: 'jquery',
jQuery: 'jquery',*/
}),
new webpack.ProvidePlugin(common['PROVIDES']),
new webpack.DefinePlugin(common['JSVARS']),
//new webpack.HotModuleReplacementPlugin(),
new MiniCssExtractPlugin(),