webpack.config.js

/* eslint-disable */
'use strict';
const path = require('path');
const glob = require('glob');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const HtmlMinimizerPlugin = require('html-minimizer-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = (env) => {
  const isDev = !(env || {}).production;
  const cacheDir = path.resolve(__dirname, '.webpack_cache');
  const commonCssLoaders = (otherLoaders = []) =>
    [
      MiniCssExtractPlugin.loader,
      // {
      //   loader: 'file-loader',
      //   options: {
      //     name: isDev ? '[name].css' : '[name].[contenthash:6].css',
      //   },
      // },
      // 'extract-loader?publicPath=', // see peerigon/extract-loader#95
      {
        loader: 'css-loader',
        options: {
          importLoaders: 1 + otherLoaders.length,
        },
      },
      {
        loader: 'postcss-loader', // Run post css actions
        options: {
          postcssOptions: {
            ident: 'postcss',
            syntax: 'postcss-scss',
            plugins: [require('tailwindcss'), require('autoprefixer')],
          },
        },
      },
    ].concat(otherLoaders);

  return {
    devtool: isDev ? 'eval-cheap-module-source-map' : 'source-map',
    entry: [
      path.resolve(__dirname, 'src/main.js'),
      // path.resolve(__dirname, 'src/index.html'),
    ],
    cache: isDev
      ? {
          type: 'filesystem',
          cacheDirectory: cacheDir,
          buildDependencies: {
            // This makes all dependencies of this file - build dependencies
            config: [__filename],
          },
        }
      : false,
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: isDev ? '[name].js' : '[name].[contenthash:6].js',
      // (pathData) => {
      //   return pathData.chunk.name === 'main'
      //     ? 'index.[contenthash:6].js'
      //     : '[name].[contenthash:6].js';
      // },
    },
    devServer: {
      contentBase: path.resolve(__dirname, 'dist'),
      hot: true,
    },
    // stats: {
    //   preset: 'errors-only',
    //   logging: true,
    //   loggingDebug: /sass/,
    // },
    module: {
      rules: [
        {
          test: /\.(png|jpe?g|gif)$/i,
          use: 'file-loader?name=[name].[contenthash:6].js',
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'babel-loader',
              options: {
                presets: ['@babel/preset-env'],
                cacheDirectory: path.join(cacheDir, 'babel-loader'),
                // cacheCompression: false,
              },
            },
          ],
        },
        // {
        //   test: /\.html$/i,
        //   use: [
        //     'file-loader?name=[name].[ext]',
        //     'extract-loader?publicPath=', // see peerigon/extract-loader#95
        //     'html-loader',
        //   ],
        // },
        {
          test: /\.s(c|a)ss$/,
          use: commonCssLoaders(['sass-loader']),
        },
        {
          test: /\.(css)$/,
          use: commonCssLoaders(),
        },
      ],
    },
    resolve: {
      extensions: ['.js', '.css', '.scss', '.sass'],
    },
    mode: isDev ? 'development' : 'production',
    plugins: [
      new CleanWebpackPlugin(),
      new MiniCssExtractPlugin({
        filename: isDev ? '[name].css' : '[name].[contenthash:6].css',
      }),
      new CopyPlugin({
        patterns: [
          {
            context: 'src',
            from: path.join(__dirname, 'src/**/*.html'),
          },
        ],
      }),
    ],
    optimization: {
      minimizer: ['...', new HtmlMinimizerPlugin(), new CssMinimizerPlugin()],
    },
  };
};