Commit fb9073ee authored by Oleksii Savran's avatar Oleksii Savran Committed by Matija Obreza
Browse files

Map: CSS bundling

-fixed eslint warnings
parent 653a7317
...@@ -5,7 +5,7 @@ const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin'); ...@@ -5,7 +5,7 @@ const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin'); const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ManifestPlugin = require('webpack-manifest-plugin'); const ManifestPlugin = require('webpack-manifest-plugin');
// const CopyWebpackPlugin = require('copy-webpack-plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin');
// const fs = require('fs'); // const fs = require('fs');
// devserver configuration // devserver configuration
...@@ -14,178 +14,161 @@ const PORT = process.env.PORT || 3000; ...@@ -14,178 +14,161 @@ const PORT = process.env.PORT || 3000;
module.exports = { module.exports = {
stats: { stats: {
colors: true colors: true,
},
devServer: {
hot: true,
inline: true,
contentBase: false,
compress: true,
port: PORT,
host: HOST,
watchOptions: {
ignored: /node_modules/,
}, },
overlay: {
devServer: { warnings: true,
hot: true, errors: true,
inline: true,
contentBase: false,
compress: true,
port: PORT,
host: HOST,
watchOptions: {
ignored: /node_modules/
},
overlay: {
warnings: true,
errors: true
},
clientLogLevel: 'warning',
historyApiFallback: {
disableDotRule: true
},
}, },
clientLogLevel: 'warning',
entry: { historyApiFallback: {
genesys: [ 'babel-polyfill', /* './entrypoints/vendor.ts', */ './entrypoints/client.tsx' ] disableDotRule: true,
}, },
},
output: {
filename: '[name].[hash].js', entry: {
// chunkFilename: '[name].[hash].js', genesys: ['babel-polyfill', /* './entrypoints/vendor.ts', */ './entrypoints/client.tsx'],
path: path.join(process.cwd(), 'target/app/assets'), },
publicPath: ''
output: {
filename: '[name].[hash].js',
// chunkFilename: '[name].[hash].js',
path: path.join(process.cwd(), 'target/app/assets'),
publicPath: '',
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'],
modules: [path.resolve('./src'), 'node_modules'],
alias: {
'@genesys/client': path.resolve(process.cwd(), '../genesys-ui/workspaces/client/src'),
'@assets': path.resolve(process.cwd(), './assets'),
}, },
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx'], module: {
modules: [path.resolve('./src'), 'node_modules'], rules: [
alias: { {
'@genesys/client': path.resolve(process.cwd(), '../genesys-ui/workspaces/client/src'), test: /\.tsx?$/,
'@assets': path.resolve(process.cwd(), './assets'), enforce: 'pre',
loader: 'eslint-loader',
exclude: /node_modules/,
},
{
test: /\.tsx?$/,
use: {
loader: 'awesome-typescript-loader',
}, },
}, },
// {
module: { // test: /\.scss$/,
rules: [ // use: [
{ // MiniCssExtractPlugin.loader,
test: /\.tsx?$/, // {
enforce: 'pre', // loader: 'css-loader',
loader: 'eslint-loader', // options: {
exclude: /node_modules/, // modules: false,
}, // },
{ // },
test: /\.tsx?$/, // 'resolve-url-loader', {
use: { // loader: 'sass-loader',
loader: 'awesome-typescript-loader', // options: {
}, // sourceMap: true,
}, // sassOptions: {
{ // includePaths: ['node_modules'],
test: /\.scss$/, // },
use: [ // },
MiniCssExtractPlugin.loader, // },
{ // ],
loader: 'css-loader', // },
options: { {
modules: false test: /\.css$/,
}, // exclude: /node_modules\/react\-toolbox/,
}, use: [
'resolve-url-loader', { MiniCssExtractPlugin.loader,
loader: 'sass-loader', 'css-loader',
options: { ],
sourceMap: true, },
sassOptions: { // fonts
includePaths: ['node_modules'] {
} test: /\.(woff|woff2|eot)(\?.*)?$/,
} loader: 'file-loader?name=fonts/[hash].[ext]',
} },
] {
}, test: /\.ttf(\?.*)?$/,
{ loader: 'url-loader?limit=10000&mimetype=application/octet-stream&name=fonts/[hash].[ext]',
test: /\.css$/, },
exclude: /node_modules\/react\-toolbox/, {
use: [ test: /\.(png|jpe?g)$/,
MiniCssExtractPlugin.loader, use: [
'css-loader' { loader: "file-loader?name=images/[name].[ext]" },
] ],
}, },
{
test: /\.css$/,
include: /node_modules\/react\-toolbox/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
sourceMap: true,
localIdentName: '[path][name]__[local]'
}
}, 'resolve-url-loader', 'postcss-loader'
]
},
// fonts
{
test: /\.(woff|woff2|eot)(\?.*)?$/,
loader: 'file-loader?name=fonts/[hash].[ext]'
},
{
test: /\.ttf(\?.*)?$/,
loader: 'url-loader?limit=10000&mimetype=application/octet-stream&name=fonts/[hash].[ext]'
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
exclude: /node_modules\/leaflet/,
loader: 'url-loader?limit=100000&name=images/[name].[ext]'
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
include: /node_modules\/leaflet/,
loader: 'file-loader?limit=100000&name=images/[name].[ext]'
}
]
},
plugins: [
new ManifestPlugin({
basePath: '/html/'
}),
// Inject scripts to app's real index.html
new HtmlWebpackPlugin({
title: 'Genesys', // The title to use for the generated HTML document
filename: 'index.html', // The file to write the HTML to
// minify: {...}, // Pass a html-minifier options object to minify the output
xhtml: true,
template: './entrypoints/index.html',
// favicon: 'favicon.ico',
// localesMapping: fs.readFileSync('./generated/locales/localesMapping.json', {encoding: 'utf8'}),
}),
// Defer/Async scripts
new ScriptExtHtmlWebpackPlugin({
defaultAttribute: 'async',
// async: [ 'genesys' ],
}),
// Keep CSS separate
new MiniCssExtractPlugin({
filename: '[name].[hash].css',
chunkFilename: '[name].[hash].css'
}),
new HtmlWebpackExcludeAssetsPlugin(),
// Used with i18next-http-backend plugin
// new CopyWebpackPlugin([
// { from: 'src/locales', to: 'locales'},
// ]),
], ],
},
// optimization: { plugins: [
// splitChunks: {
// chunks: 'all', new ManifestPlugin({
// cacheGroups: { basePath: '/html/',
// vendor: { }),
// test: /[\\/]node_modules[\\/]/,
// name: 'vendors', // Inject scripts to app's real index.html
// chunks: 'all'
// } new HtmlWebpackPlugin({
// }, title: 'Genesys', // The title to use for the generated HTML document
// }, filename: 'index.html', // The file to write the HTML to
// } // minify: {...}, // Pass a html-minifier options object to minify the output
xhtml: true,
template: './entrypoints/index.html',
// favicon: 'favicon.ico',
// localesMapping: fs.readFileSync('./generated/locales/localesMapping.json', {encoding: 'utf8'}),
}),
// Defer/Async scripts
new ScriptExtHtmlWebpackPlugin({
defaultAttribute: 'async',
// async: [ 'genesys' ],
}),
// Keep CSS separate
new MiniCssExtractPlugin({
filename: '[name].[hash].css',
chunkFilename: '[name].[hash].css',
}),
new HtmlWebpackExcludeAssetsPlugin(),
new CopyWebpackPlugin({
patterns: [
{ from: './node_modules/leaflet/dist/images', to: 'images' },
// Used with i18next-http-backend plugin
// { from: 'src/locales', to: 'locales' },
],
}),
],
// optimization: {
// splitChunks: {
// chunks: 'all',
// cacheGroups: {
// vendor: {
// test: /[\\/]node_modules[\\/]/,
// name: 'vendors',
// chunks: 'all'
// }
// },
// },
// }
}; };
...@@ -7,29 +7,29 @@ const commonConfig = require('./webpack-base.config.js'); ...@@ -7,29 +7,29 @@ const commonConfig = require('./webpack-base.config.js');
module.exports = webpackMerge.smart(commonConfig, { module.exports = webpackMerge.smart(commonConfig, {
mode: "development", mode: "development",
devtool: "source-map", devtool: "source-map",
entry: {}, entry: {},
plugins: [ plugins: [
new webpack.LoaderOptionsPlugin({ new webpack.LoaderOptionsPlugin({
minimize: false, minimize: false,
debug: true, debug: true,
options: { options: {
tslint: { tslint: {
failOnHint: false failOnHint: false,
} },
} },
}), }),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
filename: 'index.html', // The file to write the HTML to filename: 'index.html', // The file to write the HTML to
// minify: {...}, // Pass a html-minifier options object to minify the output // minify: {...}, // Pass a html-minifier options object to minify the output
xhtml: true, xhtml: true,
template: './entrypoints/index.html', template: './entrypoints/index.html',
}), }),
// hot module replacement for webpack-dev-server // hot module replacement for webpack-dev-server
new webpack.HotModuleReplacementPlugin(), new webpack.HotModuleReplacementPlugin(),
], ],
}); });
const path = require('path'); const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = { module.exports = {
...@@ -51,6 +52,20 @@ module.exports = { ...@@ -51,6 +52,20 @@ module.exports = {
loader: 'awesome-typescript-loader', loader: 'awesome-typescript-loader',
}, },
}, },
{
test: /\.css$/,
// exclude: /node_modules\/react\-toolbox/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
],
},
{
test: /\.(png|jpe?g)$/,
use: [
{ loader: "file-loader?name=images/[name].[ext]" },
],
},
{ {
test: /\.scss$/, test: /\.scss$/,
use: [ use: [
...@@ -75,6 +90,22 @@ module.exports = { ...@@ -75,6 +90,22 @@ module.exports = {
], ],
}, },
plugins: [
// Keep CSS separate
new MiniCssExtractPlugin({
filename: '[name].[hash].css',
chunkFilename: '[name].[hash].css',
}),
new CopyWebpackPlugin({
patterns: [
{ from: './node_modules/leaflet/dist/images', to: 'images' },
// Used with i18next-http-backend plugin
// { from: 'src/locales', to: 'locales' },
],
}),
],
optimization: { optimization: {
noEmitOnErrors: true, noEmitOnErrors: true,
splitChunks: { splitChunks: {
......
...@@ -9,73 +9,73 @@ const commonConfig = require('./webpack-base.config.js'); ...@@ -9,73 +9,73 @@ const commonConfig = require('./webpack-base.config.js');
module.exports = webpackMerge.smart(commonConfig, { module.exports = webpackMerge.smart(commonConfig, {
mode: "production", mode: "production",
devServer: { devServer: {
hot: false, hot: false,
inline: false, inline: false,
compress: true, compress: true,
}, },
plugins: [ plugins: [
new webpack.LoaderOptionsPlugin({ new webpack.LoaderOptionsPlugin({
minimize: true, minimize: true,
debug: false debug: false
}), }),
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
filename: 'index.html', // The file to write the HTML to filename: 'index.html', // The file to write the HTML to
// minify: {...}, // Pass a html-minifier options object to minify the output // minify: {...}, // Pass a html-minifier options object to minify the output
xhtml: true, xhtml: true,
template: './entrypoints/index.html', template: './entrypoints/index.html',
}), }),
], ],
optimization: { optimization: {
noEmitOnErrors: true, noEmitOnErrors: true,
splitChunks: { splitChunks: {
chunks: 'all', chunks: 'all',
cacheGroups: { cacheGroups: {
vendor: { vendor: {
test: /[\\/]node_modules[\\/]/, test: /[\\/]node_modules[\\/]/,
name: 'vendors', name: 'vendors',
chunks: 'all' chunks: 'all'
}, },
client: { client: {
test: /[\\/]client[\\/]/, test: /[\\/]client[\\/]/,
name: 'client', name: 'client',
chunks: 'all', chunks: 'all',
}, },
}, },
},
minimizer: [
//
new MinifyPlugin({
parallel: true,
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {},
mangle: true, // Note `mangle.properties` is `false` by default.
module: false,
output: null,
toplevel: false,
nameCache: null,
ie8: false,
keep_classnames: undefined,
keep_fnames: false,
safari10: false,
}, },
minimizer: [ }),
// // Minify CSS
new MinifyPlugin({ new OptimizeCssAssetsPlugin({
parallel: true, // cssProcessor: require('cssnano'),
terserOptions: { // cssProcessorOptions: {
ecma: undefined, // discardComments: {
warnings: false, // removeAll: true
parse: {}, // }
compress: {}, // },
mangle: true, // Note `mangle.properties` is `false` by default. // canPrint: true
module: false, }),
output: null, ]
toplevel: false, }
nameCache: null,
ie8: false,
keep_classnames: undefined,
keep_fnames: false,
safari10: false,
},
}),
// Minify CSS
new OptimizeCssAssetsPlugin({
// cssProcessor: require('cssnano'),
// cssProcessorOptions: {
// discardComments: {
// removeAll: true
// }
// },
// canPrint: true
}),
]
}
}); });
...@@ -3,5 +3,5 @@ ...@@ -3,5 +3,5 @@
// We could also look at environment vars: // We could also look at environment vars:
// const ENV = process.env.NODE_ENV === 'production' ? 'production' : 'development'; // const ENV = process.env.NODE_ENV === 'production' ? 'production' : 'development';
module.exports = function(env) { module.exports = function(env) {
return require('./webpack-' + env + '.config.js'); return require('./webpack-' + env + '.config.js');
}; };
...@@ -9,9 +9,9 @@ ...@@ -9,9 +9,9 @@
<meta name="author" content="Genesys Team, helpdesk@genesys-pgr.org" /> <meta name="author" content="Genesys Team, helpdesk@genesys-pgr.org" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"> integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" <!-- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/> crossorigin=""/> -->
</head> </head>
<body> <body>
......