kk-webpack-base--config/src/webpack.plugins.js

Webpack config for kk-webpack-base

const path = require('path');
const webpack = require('webpack');
const { config } = require('./webpack.project-config.js');
const { copyThingPattern, isDev } = require('./webpack.helpers');

const ESLintPlugin = require('eslint-webpack-plugin');
const StylelintPlugin = require('stylelint-webpack-plugin');
const WebpackBar = require('webpackbar');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
const { VueLoaderPlugin } = require('vue-loader');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const plugins = [
  new WebpackBar({
    profile: true,
    color: '#85d',
    basic: false,
  }),
  new CleanWebpackPlugin({
    cleanOnceBeforeBuildPatterns: [
      'assets/css/*',
      'assets/js/*',
      'assets/img/*',
      'assets/fonts/*',
      'assets/files/*',
      'assets/iconset.svg',
      '**/*.hot-update.*',
      '**/*.manifest.json',
      ...(isDev ? [] : ['**/*.map']),
    ],
    cleanStaleWebpackAssets: false,
    dangerouslyAllowCleanPatternsOutsideProject: false,
  }),
  new CopyWebpackPlugin({
    patterns: [
      copyThingPattern('/img', 'assets/img'),
      copyThingPattern('/files', 'assets/files'),
      copyThingPattern('/fonts', 'assets/fonts'),
      copyThingPattern('/publicFiles', '.'),
    ],
  }),
  new MiniCssExtractPlugin({
    filename: 'assets/css/[name].css',
    chunkFilename: 'assets/css/[name].chunk.css',
  }),
  new SpriteLoaderPlugin({
    plainSprite: true,
  }),
  new VueLoaderPlugin(),
  // Vue 3 feature flags for tree-shaking
  new webpack.DefinePlugin({
    __VUE_OPTIONS_API__: JSON.stringify(true),
    __VUE_PROD_DEVTOOLS__: JSON.stringify(false),
    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: JSON.stringify(false),
  }),
  // Development plugins
  isDev &&
    new ESLintPlugin({
      baseConfig: require('./configs/eslint.config.js'),
      extensions: ['js', 'jsx', 'ts', 'tsx', 'vue'],
      emitWarning: true,
      files: path.resolve(process.cwd(), `${config.sourcePath}`),
      cache: true,
      cacheLocation: path.resolve(
        process.cwd(),
        'node_modules/.cache/.eslintcache'
      ),
    }),
  isDev &&
    new StylelintPlugin({
      files: path.join(process.cwd(), config.sourcePath, 'scss/**/*.s?(a|c)ss'),
      fix: true,
      config: require('./configs/stylelint.config.js'),
      cache: true,
      cacheLocation: path.resolve(
        process.cwd(),
        'node_modules/.cache/.stylelintcache'
      ),
    }),
];

module.exports = plugins.filter(Boolean);