webpack-bootstrap-ui-kit/webpack.config.common.js

221 lines
7.1 KiB
JavaScript
Raw Normal View History

2021-01-20 16:31:34 +01:00
/*
* Common Environment
*/
2021-08-09 19:41:14 +02:00
const INDEX_NAME = 'test-build';
2021-05-03 19:00:50 +02:00
const YML_PATH = './webpack.yml';
const CONF_VAR = 'App\\Templates\\WebpackTemplateProvider';
2021-01-20 16:31:34 +01:00
const path = require('path');
2021-05-03 19:00:50 +02:00
const fs = require('fs');
const yaml = require('js-yaml');
const webpack = require('webpack');
2021-08-11 19:17:10 +02:00
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
2021-01-20 16:31:34 +01:00
2021-05-03 19:00:50 +02:00
/*
* Load webpack configuration from webpack.yml
*/
2021-08-02 22:03:17 +02:00
const yml = yaml.load(
2021-05-03 19:00:50 +02:00
fs.readFileSync(path.join(__dirname, YML_PATH), 'utf8'),
);
2021-09-12 23:19:05 +02:00
const conf = yml[CONF_VAR];
2021-05-03 19:00:50 +02:00
2021-08-11 19:17:10 +02:00
const UIInfo = require('./package.json');
const UIVERSION = JSON.stringify(UIInfo.version);
const UIMetaInfo = require('./node_modules/@a2nt/meta-lightbox-js/package.json');
const NODE_ENV = process.env.NODE_ENV;
const COMPRESS = NODE_ENV === 'production' ? true : false;
console.log('NODE_ENV: ' + NODE_ENV);
console.log('COMPRESS: ' + COMPRESS);
console.log('WebP images: ' + conf['webp']);
console.log('GRAPHQL_API_KEY: ' + conf['GRAPHQL_API_KEY']);
console.log('HTTPS: ' + conf['HTTPS']);
2021-05-03 19:00:50 +02:00
let themes = [];
// add themes
if (conf.THEMESDIR) {
2021-09-12 23:19:05 +02:00
const themeDir = conf.THEMESDIR;
const dir = path.resolve(__dirname, themeDir);
if (fs.existsSync(dir)) {
fs.readdirSync(dir).forEach((file) => {
filePath = path.join(themeDir, file);
const stat = fs.statSync(filePath);
if (stat && stat.isDirectory()) {
themes.push(filePath);
}
});
}
2021-05-03 19:00:50 +02:00
}
/* Setup Entries */
2021-01-20 16:31:34 +01:00
const includes = {};
const modules = [
2021-05-03 19:00:50 +02:00
path.resolve(__dirname, conf.APPDIR, conf.SRC),
path.resolve(__dirname, conf.APPDIR, conf.SRC, 'js'),
path.resolve(__dirname, conf.APPDIR, conf.SRC, 'scss'),
path.resolve(__dirname, conf.APPDIR, conf.SRC, 'img'),
path.resolve(__dirname, conf.APPDIR, conf.SRC, 'thirdparty'),
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname),
path.resolve(__dirname, 'public'),
2021-01-20 16:31:34 +01:00
];
const _addAppFiles = (theme) => {
2021-05-03 19:00:50 +02:00
const dirPath = './' + theme;
let themeName = path.basename(theme);
if (themeName == '.') {
2021-09-12 23:19:05 +02:00
themeName = 'app';
2021-05-03 19:00:50 +02:00
}
2021-08-09 19:41:14 +02:00
if (fs.existsSync(path.join(dirPath, conf.SRC, 'js', INDEX_NAME + '.js'))) {
2021-09-12 23:19:05 +02:00
includes[`${themeName}`] = path.join(dirPath, conf.SRC, 'js', INDEX_NAME + '.js');
2021-05-03 19:00:50 +02:00
} else if (
2021-08-09 19:41:14 +02:00
fs.existsSync(path.join(dirPath, conf.SRC, 'scss', INDEX_NAME + '.scss'))
2021-05-03 19:00:50 +02:00
) {
2021-09-12 23:19:05 +02:00
includes[`${themeName}`] = path.join(
dirPath,
conf.SRC,
'scss',
INDEX_NAME + '.scss',
);
2021-05-03 19:00:50 +02:00
}
modules.push(path.join(dirPath, conf.SRC, 'js'));
modules.push(path.join(dirPath, conf.SRC, 'scss'));
modules.push(path.join(dirPath, conf.SRC, 'img'));
modules.push(path.join(dirPath, conf.SRC, 'thirdparty'));
2021-09-12 23:19:05 +02:00
const _getAllFilesFromFolder = function (dir, includeSubFolders = true) {
2021-05-03 19:00:50 +02:00
const dirPath = path.resolve(__dirname, dir);
let results = [];
fs.readdirSync(dirPath).forEach((file) => {
if (file.charAt(0) === '_') {
2021-09-12 23:19:05 +02:00
return;
2021-05-03 19:00:50 +02:00
}
const filePath = path.join(dirPath, file);
const stat = fs.statSync(filePath);
if (stat && stat.isDirectory() && includeSubFolders) {
2021-09-12 23:19:05 +02:00
results = results.concat(
_getAllFilesFromFolder(filePath, includeSubFolders),
);
2021-05-03 19:00:50 +02:00
} else {
2021-09-12 23:19:05 +02:00
results.push(filePath);
2021-05-03 19:00:50 +02:00
}
2021-09-12 23:19:05 +02:00
});
2021-05-03 19:00:50 +02:00
return results;
2021-09-12 23:19:05 +02:00
};
2021-05-03 19:00:50 +02:00
// add page specific scripts
const typesJSPath = path.join(theme, conf.TYPESJS);
if (fs.existsSync(typesJSPath)) {
2021-09-12 23:19:05 +02:00
const pageScripts = _getAllFilesFromFolder(typesJSPath, true);
pageScripts.forEach((file) => {
includes[`${themeName}_${path.basename(file, '.js')}`] = file;
2021-05-03 19:00:50 +02:00
});
}
// add page specific scss
const typesSCSSPath = path.join(theme, conf.TYPESSCSS);
if (fs.existsSync(typesSCSSPath)) {
2021-09-12 23:19:05 +02:00
const scssIncludes = _getAllFilesFromFolder(typesSCSSPath, true);
scssIncludes.forEach((file) => {
includes[`${themeName}_${path.basename(file, '.scss')}`] = file;
2021-05-03 19:00:50 +02:00
});
}
2021-09-12 23:19:05 +02:00
};
2021-01-20 16:31:34 +01:00
_addAppFiles(conf.APPDIR);
2021-01-31 14:29:24 +01:00
// remove some backend includes
delete includes['app_editor'];
delete includes['app_cms'];
delete includes['app_order'];
2021-01-20 16:31:34 +01:00
// add themes
2021-05-03 19:00:50 +02:00
themes.forEach((theme) => {
_addAppFiles(theme);
2021-09-12 23:19:05 +02:00
});
2021-01-20 16:31:34 +01:00
module.exports = {
2021-05-03 19:00:50 +02:00
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',
2021-09-12 23:19:05 +02:00
},
2021-05-03 19:00:50 +02:00
resolve: {
modules: modules,
2021-09-12 23:19:05 +02:00
extensions: ['.tsx', '.ts', '.js'],
2021-05-03 19:00:50 +02:00
alias: {
2021-09-12 23:19:05 +02:00
// 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'),
2021-05-03 19:00:50 +02:00
},
2021-08-02 22:03:17 +02:00
fallback: {
2021-09-12 23:19:05 +02:00
path: false,
},
},
2021-05-03 19:00:50 +02:00
experiments: {
topLevelAwait: true,
2021-09-12 23:19:05 +02:00
},
},
2021-08-11 19:17:10 +02:00
plugins: [
new webpack.ProvidePlugin({
react: 'React',
'react-dom': 'ReactDOM',
/*$: 'jquery',
jQuery: 'jquery',
Popper: ['popper.js', 'default'],
Util: 'exports-loader?Util!bootstrap/js/dist/util',
Alert: 'exports-loader?Alert!bootstrap/js/dist/alert',
Button: 'exports-loader?Button!bootstrap/js/dist/button',
Carousel: 'exports-loader?Carousel!bootstrap/js/dist/carousel',
Collapse: 'exports-loader?Collapse!bootstrap/js/dist/collapse',
Dropdown: 'exports-loader?Dropdown!bootstrap/js/dist/dropdown',
Modal: 'exports-loader?Modal!bootstrap/js/dist/modal',
Tooltip: 'exports-loader?Tooltip!bootstrap/js/dist/tooltip',
Popover: 'exports-loader?Popover!bootstrap/js/dist/popover',
Scrollspy: 'exports-loader?Scrollspy!bootstrap/js/dist/scrollspy',
Tab: 'exports-loader?Tab!bootstrap/js/dist/tab',*/
2021-09-12 23:19:05 +02:00
}),
2021-08-11 19:17:10 +02:00
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(NODE_ENV),
2021-09-12 23:19:05 +02:00
},
2021-08-11 19:17:10 +02:00
UINAME: JSON.stringify(UIInfo.name),
UIVERSION: UIVERSION,
UIAUTHOR: JSON.stringify(UIInfo.author),
UIMetaNAME: JSON.stringify(UIMetaInfo.name),
UIMetaVersion: JSON.stringify(UIMetaInfo.version),
GRAPHQL_API_KEY: JSON.stringify(conf['GRAPHQL_API_KEY']),
SWVERSION: JSON.stringify(`sw-${new Date().getTime()}`),
BASE_HREF: JSON.stringify(''),
2021-09-12 23:19:05 +02:00
}),
2021-08-11 19:17:10 +02:00
new webpack.LoaderOptionsPlugin({
minimize: COMPRESS,
debug: !COMPRESS,
2021-09-12 23:19:05 +02:00
}),
2021-08-11 19:17:10 +02:00
new MiniCssExtractPlugin({
filename: 'css/[name].css',
//allChunks: true,
2021-10-12 15:24:07 +02:00
experimentalUseImportModule: false,
2021-09-12 23:19:05 +02:00
}),
],
};