webpack.config.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');

module.exports = (env, options) => {
    return {
        resolve: {
            alias: {
                vue: 'vue/dist/vue.js'
            }
        },
        plugins: [
            new CleanWebpackPlugin(),
            new MiniCssExtractPlugin({
                filename: '[name].[contenthash].css'
            }),
            new HtmlWebpackPlugin({
                filename: '../index.html',
                template: 'src/template.html'
            }),
            // new WorkboxPlugin.GenerateSW({
            //     clientsClaim: true,
            //     skipWaiting: true,
            //     swDest: '../sw.js'
            // })
        ],
        module: {
            rules: [
                {
                    test: /\.css$/i,
                    use: [MiniCssExtractPlugin.loader, 'css-loader'],
                },
                {
                    test: /\.m?js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader",
                        options: {
                            presets: ['@babel/preset-env']
                        }
                    }
                }
            ],
        },
        /*optimization: {
            minimize: true,
            minimizer: [
                new CssMinimizerPlugin({
                    test: /\.css$/i,
                }),
            ],
        },*/
        output: {
            filename: '[name].[contenthash].js',
            path: path.resolve(__dirname, options.mode === 'production' ? 'dist' : 'tmp')
        }
    };
};