Привет! Не очень разбираюсь в конфигурации веб-пака, не знаю даже как правильно гуглить, но мой бандл весит катастрофически много, что может быть не так, что я упускаю?
const path = require("path");
const fs = require("fs");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const config = {
entry: ["./src/js/index.js", "./src/scss/style.scss"],
output: {
filename: "./js/bundle.js",
},
devtool: "source-map",
mode: "production",
optimization: {
minimizer: [
new TerserPlugin({
sourceMap: true,
extractComments: true,
}),
],
},
module: {
rules: [
{
test: /\.(sass|scss)$/,
include: path.resolve(__dirname, "src/scss"),
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {},
},
{
loader: "css-loader",
options: {
sourceMap: true,
url: false,
},
},
{
loader: "postcss-loader",
options: {
sourceMap: true,
postcssOptions: {
plugins: () => [
require("cssnano")({
preset: [
"default",
{
discardComments: {
removeAll: true,
},
},
],
}),
],
},
},
},
{
loader: "sass-loader",
options: {
sourceMap: true,
},
},
],
}
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "./css/style.bundle.css",
}),
new CopyPlugin({
patterns: [
{
from: "./src/fonts",
to: "./fonts",
},
{
from: "./src/favicon",
to: "./favicon",
},
{
from: "./src/img",
to: "./img",
},
],
})
]
};
module.exports = (env, argv) => {
if (argv.mode === "production") {
config.plugins.push(new CleanWebpackPlugin());
}
return config;
};
Вот мой package.json:
{
"name": "epsilon",
"version": "1.0.0",
"description": "Epsilon theme",
"main": "src/index.js",
"scripts": {
"dev": "webpack --mode development",
"watch": "webpack --mode=development --watch",
"build": "webpack --mode=production",
"build:watch": "webpack --mode=production --watch"
},
"dependencies": {
"inputmask": "^5.0.5",
"jquery": "^3.6.0",
"jquery-ui": "^1.12.1",
"jquery-ui-bundle": "^1.12.1-migrate",
"mapbox-gl": "^2.3.1",
"scrollmagic": "^2.0.8",
"slick-carousel": "^1.8.1",
"smooth-scrollbar": "^8.6.2",
"swiper": "^6.7.5",
"three": "^0.128.0"
},
"devDependencies": {
"@types/mapbox-gl": "^2.3.3",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.4.1",
"css-loader": "^4.3.0",
"css-minimizer-webpack-plugin": "^1.2.0",
"cssnano": "^4.1.10",
"gsap": "^3.7.1",
"imagemin-webpack-plugin": "^2.4.2",
"medium-editor": "^5.23.3",
"mini-css-extract-plugin": "^0.11.3",
"moment": "^2.29.1",
"node-sass": "^4.14.1",
"postcss": "^8.2.15",
"postcss-loader": "^4.3.0",
"prettier": "^2.3.0",
"quill": "^1.3.7",
"raw-loader": "^4.0.2",
"sass-loader": "^10.2.0",
"terser-webpack-plugin": "^4.2.3",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
}
}