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,6 +126,100 @@ common.themes.forEach((theme) => {
}
});
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: {
ecma: 5,
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,
}),
);*/
}
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
.BundleAnalyzerPlugin;
plugins.push(
@ -172,75 +243,7 @@ const cfg = merge(common.webpack, {
minChunks: 2,
},
concatenateModules: true, //ModuleConcatenationPlugin
minimizer: [
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: {
ecma: 5,
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,
}),
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,
],
}),
],
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(),
@ -113,7 +108,7 @@ const config = merge(common.webpack, {
options: {
sourceMap: true,
},
},],
}, ],
},
{
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)?)$/,
type: 'asset/resource',
},],
}, ],
},
plugins: plugins,