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

361 lines
9.2 KiB
JavaScript
Raw Normal View History

const SOURCEDIR = './src';
2019-10-20 04:40:30 +02:00
const COMPRESS = false;
2019-06-08 17:20:51 +02:00
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
const filesystem = require('fs');
2019-06-08 17:20:51 +02:00
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
2019-10-20 03:19:20 +02:00
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const ImageminPlugin = require('imagemin-webpack');
2020-01-23 03:09:36 +01:00
const ImageSpritePlugin = require('@a2nt/image-sprite-webpack-plugin');
2019-06-08 17:20:51 +02:00
2019-10-20 04:40:30 +02:00
const plugins = [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production'),
},
2019-10-20 04:40:30 +02:00
}),
new webpack.LoaderOptionsPlugin({
minimize: COMPRESS,
debug: false,
2019-10-20 04:40:30 +02:00
}),
new ExtractTextPlugin({
filename: 'css/[name].css',
allChunks: true,
2019-10-20 04:40:30 +02:00
}),
/**/
new HtmlWebpackPlugin({
template: './src/index.html',
2019-10-20 04:40:30 +02:00
}),
];
if (COMPRESS) {
plugins.push(
new OptimizeCssAssetsPlugin({
//assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorPluginOptions: {
preset: ['default'],
2019-12-17 21:36:38 +01:00
},
cssProcessorOptions: {
zindex: true,
cssDeclarationSorter: true,
reduceIdents: false,
mergeIdents: true,
mergeRules: true,
mergeLonghand: true,
discardUnused: true,
discardOverridden: true,
discardDuplicates: true,
discardComments: {
removeAll: true,
},
},
canPrint: true,
}),
);
plugins.push(
new ImageminPlugin({
bail: false, // Ignore errors on corrupted images
cache: true,
filter: (source, sourcePath) => {
if (source.byteLength < 512000) {
return false;
}
return true;
},
imageminOptions: {
plugins: [
['gifsicle', { interlaced: true }],
['jpegtran', { progressive: true }],
['optipng', { optimizationLevel: 5 }],
[
'svgo',
{
plugins: [
{
removeViewBox: false,
},
],
},
],
],
},
}),
);
2020-01-23 03:09:36 +01:00
plugins.push(
new ImageSpritePlugin({
exclude: /exclude|original|default-|icons|sprite/,
commentOrigin: false,
compress: true,
extensions: ['png'],
indent: '',
log: true,
//outputPath: path.join(__dirname, conf.APPDIR, conf.DIST),
outputFilename: 'img/sprite-[hash].png',
padding: 0,
}),
);
2019-10-20 04:40:30 +02:00
}
const includes = {};
const _addAppFiles = theme => {
const dirPath = path.resolve(__dirname, theme);
const themeName = path.basename(theme);
if (filesystem.existsSync(path.join(dirPath, 'js', 'app.js'))) {
includes['app'] = path.join(dirPath, 'js', 'app.js');
} else if (filesystem.existsSync(path.join(dirPath, 'scss', 'app.scss'))) {
includes['app'] = path.join(dirPath, 'scss', 'app.scss');
}
const _getAllFilesFromFolder = function(dir, includeSubFolders = true) {
const dirPath = path.resolve(__dirname, dir);
let results = [];
filesystem.readdirSync(dirPath).forEach(file => {
if (file.charAt(0) === '_') {
return;
}
const filePath = path.join(dirPath, file);
const stat = filesystem.statSync(filePath);
if (stat && stat.isDirectory() && includeSubFolders) {
results = results.concat(
_getAllFilesFromFolder(filePath, includeSubFolders),
);
} else {
results.push(filePath);
}
});
return results;
};
// add page specific scripts
const typesJSPath = path.join(theme, 'js/types');
if (filesystem.existsSync(typesJSPath)) {
const pageScripts = _getAllFilesFromFolder(typesJSPath, true);
pageScripts.forEach(file => {
includes[`app_${path.basename(file, '.js')}`] = file;
});
}
// add page specific scss
const typesSCSSPath = path.join(theme, 'scss/types');
if (filesystem.existsSync(typesSCSSPath)) {
const scssIncludes = _getAllFilesFromFolder(typesSCSSPath, true);
scssIncludes.forEach(file => {
includes[`app_${path.basename(file, '.scss')}`] = file;
});
}
};
_addAppFiles(SOURCEDIR);
// remove unnecessary elements for the demo
delete includes['app_cms'];
delete includes['app_editor'];
delete includes['app_order'];
2019-06-08 17:20:51 +02:00
module.exports = {
entry: includes,
2019-06-08 17:20:51 +02:00
output: {
path: path.resolve(__dirname, 'dist'),
filename: path.join('js', '[name].js'),
publicPath: path.resolve(__dirname, 'dist'),
2019-06-08 17:20:51 +02:00
},
devtool: COMPRESS ? '' : 'source-map',
2019-06-08 17:20:51 +02:00
externals: {
jquery: 'jQuery',
2019-06-08 17:20:51 +02:00
},
optimization: {
namedModules: true, // NamedModulesPlugin()
splitChunks: {
// CommonsChunkPlugin()
2019-06-08 17:20:51 +02:00
name: 'vendor',
minChunks: 2,
2019-06-08 17:20:51 +02:00
},
noEmitOnErrors: true, // NoEmitOnErrorsPlugin
concatenateModules: true, //ModuleConcatenationPlugin
minimizer: [
2019-10-20 03:19:20 +02:00
new TerserPlugin({
terserOptions: {
parse: {
2020-02-07 20:49:38 +01:00
// 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
2019-10-20 03:19:20 +02:00
ecma: 8,
},
2020-02-07 20:49:38 +01:00
compress: {
ecma: 5,
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,
},
mangle: {
safari10: true,
},
2019-10-20 03:19:20 +02:00
output: {
ecma: 5,
2020-02-07 20:49:38 +01:00
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,
2019-10-20 03:19:20 +02:00
},
},
2020-02-07 20:49:38 +01:00
// Use multi-process parallel running to improve the build speed
// Default number of concurrent runs: os.cpus().length - 1
parallel: true,
// Enable file caching
cache: true,
2019-10-20 03:19:20 +02:00
}),
],
2019-06-08 17:20:51 +02:00
},
module: {
rules: [
{
test: /\.jsx?$/,
2020-02-07 20:49:38 +01:00
//exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
2020-02-07 20:49:38 +01:00
presets: ['@babel/preset-env'], //Preset used for env setup
plugins: [
['@babel/transform-react-jsx'],
['react-hot-loader/babel'],
],
},
2019-06-08 17:20:51 +02:00
},
},
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
2019-06-08 17:20:51 +02:00
},
{
test: /\.coffee?$/,
use: 'coffee-loader',
},
{
test: /\.worker\.js$/,
use: {
loader: 'worker-loader',
},
},
{
test: /\.s?css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
sourceMap: !COMPRESS,
},
},
{
loader: 'postcss-loader',
options: {
sourceMap: !COMPRESS,
plugins: [autoprefixer()],
},
},
{
loader: 'resolve-url-loader',
},
{
loader: 'sass-loader',
options: {
sourceMap: !COMPRESS,
},
},
],
}),
},
{
test: /fontawesome([^.]+).(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
publicPath: '../fonts/',
},
},
],
},
{
test: /\.(ttf|otf|eot|svg|woff(2)?)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
publicPath: '../fonts/',
},
},
],
},
{
test: /\.(png|jpg|jpeg|gif|svg)$/,
2019-06-08 17:20:51 +02:00
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'img/',
publicPath: '../img/',
},
2019-06-08 17:20:51 +02:00
},
],
2019-06-08 17:20:51 +02:00
},
resolve: {
modules: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'node_modules'),
],
alias: {
jquery: require.resolve('jquery'),
jQuery: require.resolve('jquery'),
2019-06-08 17:20:51 +02:00
},
},
2019-10-20 04:40:30 +02:00
plugins: plugins,
2019-06-08 17:20:51 +02:00
devServer: {
host: '127.0.0.1',
port: 8001,
historyApiFallback: true,
hot: false,
clientLogLevel: 'info',
contentBase: [
path.resolve(__dirname, 'src'),
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, 'dist'),
],
//watchContentBase: true,
overlay: {
warnings: true,
errors: true,
2019-06-08 17:20:51 +02:00
},
headers: {
'Access-Control-Allow-Origin': '*',
},
2019-06-08 17:20:51 +02:00
},
};