const ESLintPlugin = require('eslint-webpack-plugin') 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') module.exports = (env, argv) => { const dev = argv.mode !== 'production' const config = { devtool: dev ? 'source-map' : false, entry: { 'index': [ __dirname + '/src/index.js', __dirname + '/src/index.css' ] }, output: { path: __dirname + '/../public', filename: '[name].js' }, module: { rules: [{ test: /\.js$/, exclude: [ /node_modules/ ], loader: 'babel-loader' }, { test: /\.(css)$/, use: [ { loader: dev ? 'style-loader' : MiniCssExtractPlugin.loader, }, { loader: 'css-loader', options: { sourceMap: true, }, }, { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ [ 'postcss-preset-env', { 'stage': 0 }, 'stylelint', 'autoprefixer', { 'grid': true } ], ], }, }, }, ], }, { test: /\.(png|jpe?g|gif|svg)$/i, type: 'asset/resource' }] }, plugins: [ new HtmlWebpackPlugin({ template: __dirname + '/src/index.html' }), ], resolve: { symlinks: false, extensions: ['.js'] } } if (dev) { config.plugins.push( new ESLintPlugin({ files: __dirname + '/src', lintDirtyModulesOnly: true, failOnWarning: false, failOnError: true, fix: false })) config.devServer = { hot: true, historyApiFallback: true, client: { overlay: true } } } else { config.plugins.push( new MiniCssExtractPlugin({ filename: 'Juick.[contenthash].css' }) ) } config.optimization = { minimize: !dev, minimizer: [ new TerserPlugin({ minify: TerserPlugin.swcMinify, // `terserOptions` options will be passed to `swc` (`@swc/core`) // Link to options - https://swc.rs/docs/config-js-minify terserOptions: {}, }), new CssMinimizerPlugin() ] } return config }