Commit a70b5fd0 authored by Jean-Baptiste Nizet's avatar Jean-Baptiste Nizet Committed by Exbrayat Cédric
Browse files

refactor: simplify webpack build and optimize css

parent a1a1b70c
......@@ -27,8 +27,7 @@ tasks {
val yarnBuildProd by registering(YarnTask::class) {
args.set(listOf("run", "build:prod"))
dependsOn(prepare)
inputs.file("webpack.common.js")
inputs.file("webpack.prod.js")
inputs.file("webpack.config.js")
inputs.file("tsconfig.json")
inputs.file("package.json")
inputs.file("yarn.lock")
......
......@@ -4,10 +4,10 @@
"description": "",
"private": true,
"scripts": {
"build": "webpack --config webpack.dev.js",
"build:prod": "webpack --config webpack.prod.js",
"watch": "webpack --config webpack.dev.js --watch",
"watch:prod": "webpack --config webpack.prod.js --watch",
"build": "webpack --mode development",
"build:prod": "webpack --mode production",
"watch": "webpack --mode development --watch",
"watch:prod": "webpack --mode production --watch",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
......@@ -22,6 +22,7 @@
"@types/leaflet.markercluster": "1.4.5",
"clean-webpack-plugin": "4.0.0-alpha.0",
"css-loader": "6.2.0",
"css-minimizer-webpack-plugin": "3.0.2",
"leaflet.markercluster": "1.5.0",
"mini-css-extract-plugin": "2.2.0",
"sass": "1.38.1",
......@@ -29,7 +30,6 @@
"ts-loader": "9.2.5",
"typescript": "4.3.5",
"webpack": "5.51.1",
"webpack-cli": "4.8.0",
"webpack-merge": "5.8.0"
"webpack-cli": "4.8.0"
}
}
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
module.exports = (env, argv) => ({
context: path.resolve(__dirname, '.'),
// inline source maps only in development mode
devtool: argv.mode === 'production' ? undefined : 'inline-source-map',
plugins: [
// cleans the output directory before each build
new CleanWebpackPlugin(),
// allows extracting the CSS into a CSS file instead of bundling it in a JS file
new MiniCssExtractPlugin()
new MiniCssExtractPlugin({
filename: argv.mode === 'production' ? '[name].[contenthash].css' : '[name].css'
}),
// cleans the output directory before each build
new CleanWebpackPlugin({
// and the empty, useless style.js after each build
protectWebpackAssets: false,
cleanAfterEveryBuildPatterns: ['style*.js']
})
],
entry: {
// a JS bundle is generated for the index.ts entry point. Since the application is really small
......@@ -40,7 +50,18 @@ module.exports = {
extensions: ['.ts', '.js'],
},
output: {
// the output is stored in build/dist/assets
path: path.resolve(__dirname, 'build/dist/assets'),
filename: '[name].js'
filename: argv.mode === 'production' ? '[name].[contenthash].js' : '[name].js'
},
optimization: {
minimizer: [
'...',
new CssMinimizerPlugin()
]
},
performance: {
maxAssetSize: 300000,
maxEntrypointSize: 300000
}
};
});
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map'
});
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const mergedConfig = merge(common, {
mode: 'production',
output: {
filename: '[name].[contenthash].js'
}
});
mergedConfig.plugins = mergedConfig.plugins.map(plugin => {
if (plugin instanceof MiniCssExtractPlugin) {
return new MiniCssExtractPlugin({
filename: '[name].[contenthash].css'
});
} else {
return plugin
}
});
module.exports = mergedConfig;
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment