const { CleanWebpackPlugin } = require("clean-webpack-plugin"); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const TerserPlugin = require("terser-webpack-plugin"); const path = require("path"); const join = (...paths) => path.join(__dirname, ...paths); module.exports = (env, { mode }) => ({ resolve: { extensions: [".js", ".css"], modules: ["assets", "node_modules"], }, entry: { main: [join("assets", "js", "menu.js"), join("assets", "js", "theme.js")], prism: join("assets", "js", "prism.js"), style: join("assets", "css", "style.css"), }, output: { filename: "[name].js", path: join("static/assets"), publicPath: "", }, performance: { hints: false, }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ["@babel/preset-env"], }, }, }, { test: /\.(png|jpe?g|svg)$/, type: "asset/resource", generator: { filename: "images/[name][ext]", }, }, { test: /\.(woff|woff2|ttf|eot)$/, type: "asset/resource", generator: { filename: "fonts/[name][ext]", }, }, { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, { loader: "css-loader", options: { modules: { localIdentName: "[local]", }, import: true, importLoaders: 1, }, }, { loader: "postcss-loader", }, ], }, ], }, optimization: { splitChunks: { name: "vendor", minChunks: 2, }, minimize: true, minimizer: [ new TerserPlugin({ parallel: true, extractComments: false, }), ], }, plugins: [ new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: [join("static/assets")], cleanAfterEveryBuildPatterns: [join("static/assets/style.js")], verbose: true, }), new MiniCssExtractPlugin({ filename: "[name].css", chunkFilename: "[id].css", }), ], });