webpack.config.js

Home   »   webpack.config.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ImageMinimizerWebpackPlugin = require('image-minimizer-webpack-plugin');
const EslintWebpackPlugin = require('eslint-webpack-plugin');

module.exports = (env) => {
  return {
    mode: env.production ? 'production' : 'development',
    entry: './src/js/index.js',
    module: {
      rules: [
        {
          test: /\.(jpe?g|png|gif|svg)$/i,
          type: 'asset',
        },
        {
          test: /\.(js)$/,
          exclude: /(node_modules)/,
          loader: 'babel-loader'
        },
        {
          test: /\.scss/,
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
        },
        {
          test: /\.html/,
          loader: 'html-loader'
        },
      ]
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'app.js'
    },
    devServer: {
      contentBase: path.join(__dirname, './dist'),
      port: 9000
    },
    plugins: [
      new ImageMinimizerWebpackPlugin({
        minimizerOptions: {
          // Lossless optimization with custom option
          // Feel free to experiment with options for better result for you
          plugins: [
            ['gifsicle', { interlaced: true }],
            ['mozjpeg', { progressive: true }],
            ['optipng', { optimizationLevel: 5 }],
            [
              'svgo',
              {
                plugins: [
                  {
                    removeViewBox: false,
                  },
                ],
              },
            ],
          ],
        },
      }),

      new EslintWebpackPlugin(),

      new HtmlWebpackPlugin({
        title: 'Custom template',
        template: 'src/index.html'
      }),

      new MiniCssExtractPlugin({
        filename: 'style.css'
      }),
    ],
    optimization: {
      minimize: env.production,
      minimizer: [
        new CssMinimizerWebpackPlugin(),
      ],
    },
  }
};

Leave a Reply

Your email address will not be published. Required fields are marked *