Skip to content
GitLab
Commit fb9073ee authored by Oleksii Savran's avatar Oleksii Savran Committed by Matija Obreza
Browse files

Map: CSS bundling 

-fixed eslint warnings
parent 653a7317
Expand all Hide whitespace changes
Inline Side-by-side
config/webpack-base.config.js
View file @ fb9073ee
......@@ -5,7 +5,7 @@ const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
const HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');
// const CopyWebpackPlugin = require('copy-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
// const fs = require('fs');
// devserver configuration
......@@ -14,178 +14,161 @@ const PORT = process.env.PORT || 3000;
module.exports = {
stats: {
colors: true
stats: {
colors: true,
},
devServer: {
hot: true,
inline: true,
contentBase: false,
compress: true,
port: PORT,
host: HOST,
watchOptions: {
ignored: /node_modules/,
},
devServer: {
hot: 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
},
overlay: {
warnings: true,
errors: true,
},
entry: {
genesys: [ 'babel-polyfill', /* './entrypoints/vendor.ts', */ './entrypoints/client.tsx' ]
clientLogLevel: 'warning',
historyApiFallback: {
disableDotRule: true,
},
output: {
filename: '[name].[hash].js',
// chunkFilename: '[name].[hash].js',
path: path.join(process.cwd(), 'target/app/assets'),
publicPath: ''
},
entry: {
genesys: ['babel-polyfill', /* './entrypoints/vendor.ts', */ './entrypoints/client.tsx'],
},
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'],
modules: [path.resolve('./src'), 'node_modules'],
alias: {
'@genesys/client': path.resolve(process.cwd(), '../genesys-ui/workspaces/client/src'),
'@assets': path.resolve(process.cwd(), './assets'),
},
module: {
rules: [
{
test: /\.tsx?$/,
enforce: 'pre',
loader: 'eslint-loader',
exclude: /node_modules/,
},
{
test: /\.tsx?$/,
use: {
loader: 'awesome-typescript-loader',
},
},
module: {
rules: [
{
test: /\.tsx?$/,
enforce: 'pre',
loader: 'eslint-loader',
exclude: /node_modules/,
},
{
test: /\.tsx?$/,
use: {
loader: 'awesome-typescript-loader',
},
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
modules: false
},
},
'resolve-url-loader', {
loader: 'sass-loader',
options: {
sourceMap: true,
sassOptions: {
includePaths: ['node_modules']
}
}
}
]
},
{
test: /\.css$/,
exclude: /node_modules\/react\-toolbox/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
},
{
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'},
// ]),
},
// {
// test: /\.scss$/,
// use: [
// MiniCssExtractPlugin.loader,
// {
// loader: 'css-loader',
// options: {
// modules: false,
// },
// },
// 'resolve-url-loader', {
// loader: 'sass-loader',
// options: {
// sourceMap: true,
// sassOptions: {
// includePaths: ['node_modules'],
// },
// },
// },
// ],
// },
{
test: /\.css$/,
// exclude: /node_modules\/react\-toolbox/,
use: [
MiniCssExtractPlugin.loader,
'css-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: /\.(png|jpe?g)$/,
use: [
{ loader: "file-loader?name=images/[name].[ext]" },
],
},
],
// optimization: {
// splitChunks: {
// chunks: 'all',
// cacheGroups: {
// vendor: {
// test: /[\\/]node_modules[\\/]/,
// name: 'vendors',
// chunks: 'all'
// }
// },
// },
// }
},
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(),
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'
// }
// },
// },
// }
};
config/webpack-development.config.js
View file @ fb9073ee
......@@ -7,29 +7,29 @@ const commonConfig = require('./webpack-base.config.js');
module.exports = webpackMerge.smart(commonConfig, {
mode: "development",
mode: "development",
devtool: "source-map",
devtool: "source-map",
entry: {},
entry: {},
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: false,
debug: true,
options: {
tslint: {
failOnHint: false
}
}
}),
new HtmlWebpackPlugin({
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',
}),
// hot module replacement for webpack-dev-server
new webpack.HotModuleReplacementPlugin(),
],
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: false,
debug: true,
options: {
tslint: {
failOnHint: false,
},
},
}),
new HtmlWebpackPlugin({
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',
}),
// hot module replacement for webpack-dev-server
new webpack.HotModuleReplacementPlugin(),
],
});
config/webpack-library.js
View file @ fb9073ee
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
......@@ -51,6 +52,20 @@ module.exports = {
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$/,
use: [
......@@ -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: {
noEmitOnErrors: true,
splitChunks: {
......
config/webpack-production.config.js
View file @ fb9073ee
......@@ -9,73 +9,73 @@ const commonConfig = require('./webpack-base.config.js');
module.exports = webpackMerge.smart(commonConfig, {
mode: "production",
mode: "production",
devServer: {
hot: false,
inline: false,
compress: true,
},
devServer: {
hot: false,
inline: false,
compress: true,
},
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new HtmlWebpackPlugin({
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',
}),
],
optimization: {
noEmitOnErrors: true,
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
},
client: {
test: /[\\/]client[\\/]/,
name: 'client',
chunks: 'all',
},
},
plugins: [
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new HtmlWebpackPlugin({
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',
}),
],
optimization: {
noEmitOnErrors: true,
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
},
client: {
test: /[\\/]client[\\/]/,
name: 'client',
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: [
//
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,
},
}),
// Minify CSS
new OptimizeCssAssetsPlugin({
// cssProcessor: require('cssnano'),
// cssProcessorOptions: {
// discardComments: {
// removeAll: true
// }
// },
// canPrint: true
}),
]
}
}),
// Minify CSS
new OptimizeCssAssetsPlugin({
// cssProcessor: require('cssnano'),
// cssProcessorOptions: {
// discardComments: {
// removeAll: true
// }
// },
// canPrint: true
}),
]
}
});
config/webpack.config.js
View file @ fb9073ee
......@@ -3,5 +3,5 @@
// We could also look at environment vars:
// const ENV = process.env.NODE_ENV === 'production' ? 'production' : 'development';
module.exports = function(env) {
return require('./webpack-' + env + '.config.js');
return require('./webpack-' + env + '.config.js');
};
entrypoints/index.html
View file @ fb9073ee
......@@ -9,9 +9,9 @@
<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"
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=="
crossorigin=""/>
crossorigin=""/> -->
</head>
<body>
......