I'm trying to integrate this Plugin into one of my current projects. unfrtunately its not working as expected and >90% of my files are not getting reported/tracked.
[
{
"timestamp": 1636799658202,
"files": [
{
"filename": "css/dark.css",
"previous": 0,
"size": 122,
"diff": 122
},
{
"filename": "css/light.css",
"previous": 0,
"size": 111,
"diff": 111
},
{
"filename": "index.html",
"previous": 0,
"size": 320,
"diff": 320
}
]
}
]
const path = require("path");
const zlib = require("zlib");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const SizePlugin = require('size-plugin');
module.exports = {
entry: "./src/react/index.ts",
resolve: {
extensions: [".ts", ".tsx", ".js", "css"],
},
devServer: {
static: {
directory: path.join(__dirname, "public"),
},
},
experiments: {
asset: true,
},
output: {
path: path.join(__dirname, "/public"),
filename: "./js/[name].bundle.js",
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
},
{
test: /\.css$/,
use: [
"style-loader",
{
loader: MiniCssExtractPlugin.loader,
options: {
esModule: false,
},
},
"css-loader",
],
exclude: [
path.resolve("src/css/dark.css"),
path.resolve("src/css/light.css"),
],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: "asset/resource",
generator: {
filename: "img/[hash][ext][query]",
},
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: "asset/resource",
generator: {
filename: "css/[hash][ext][query]",
},
},
],
},
optimization: {
splitChunks: {
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
name: "vendors",
chunks: "all",
},
},
},
minimize: true,
minimizer: [
new TerserPlugin(),
new CssMinimizerPlugin(),
],
},
plugins: [
new CopyPlugin({
patterns: [
{
context: "./src",
from: "css/dark.css",
to: "./css/dark.css",
},
{
context: "./src",
from: "css/light.css",
to: "./css/light.css",
},
{
context: "./src",
from: "img/**/*",
to: "./",
},
{
context: "./src",
from: "locales/**/*",
to: "./",
},
],
}),
new MiniCssExtractPlugin({
filename: "./css/[name].css",
chunkFilename: "./css/[name].bundle.css",
}),
new HtmlWebpackPlugin({
template: "./src/html/index.html",
favicon: "./src/html/favicon.ico",
}),
new CompressionPlugin({
filename: "[path][base].br",
algorithm: "brotliCompress",
test: /\.js$|\.css$|\.html$|\.jpg$|\.svg$|\.eot$|\.ttf$|\.woff$|\.woff2$/,
compressionOptions: {
params: {
[zlib.constants.BROTLI_PARAM_QUALITY]: 11,
},
},
minRatio: Number.MAX_SAFE_INTEGER,
}),
new CompressionPlugin({
filename: "[path][base].gz",
algorithm: "gzip",
test: /\.js$|\.css$|\.html$|\.jpg$|\.svg$|\.eot$|\.ttf$|\.woff$|\.woff2$/,
minRatio: Number.MAX_SAFE_INTEGER,
}),
new SizePlugin(),
],
};
Its always hard to imagine what another person is doing and because of this i have created a minimal example that shows what im doing and what is happening
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent