webpack.mix.js with clean-webpack-plugin

[mattradford]

Would you mind posting a working webpack.mix.js using clean-webpack-plugin? I'm using the following, but no matter what clean webpack options I use, I cannot get just the CSS and JS files to delete before the build runs and creates new compiled assets :(

I appreciate this isn't really an issue on your repo but couldn't find another way to contact.

Thanks :)

let mix = require("laravel-mix");
require("laravel-mix-versionhash");
require("laravel-mix-copy-watched");
require("laravel-mix-imagemin");
require("laravel-mix-polyfill");
let { CleanWebpackPlugin } = require("clean-webpack-plugin");
let wpPot = require("wp-pot");

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application, as well as bundling up your JS files.
 |
 | https://stackoverflow.com/questions/55834262/how-to-lint-sass-scss-on-laravel-mix
 */

mix

  .setPublicPath("dist")
  .js("src/js/src/main.js", "dist/js")
  .sass("src/scss/main.scss", "dist/css")
  .sass("src/scss/wp-admin.scss", "dist/css")
  .sass("src/scss/wp-editor.scss", "dist/css")
  .sass("src/scss/wp-login.scss", "dist/css")
  .options({
    processCssUrls: false,
    postCss: [require("postcss-css-variables")()]
  })
  .sourceMaps()
  .versionHash({
    delimiter: "-"
  })
  .imagemin("images/**.*", {
    context: "src"
  })
  .copyWatched("src/fonts", "dist/fonts")
  .polyfill({
    enabled: true,
    targets: false
  })
  .webpackConfig({
    plugins: [
      new CleanWebpackPlugin({
        verbose: true,
        dry: true,
        cleanStaleWebpackAssets: false,
        protectWebpackAssets: false,
        cleanOnceBeforeBuildPatterns: ["**/*.css", "**/*.js", "!**/*.svg"]
      })
    ],
    watchOptions: {
      ignored: /node_modules/
    }
  });

wpPot({
  destFile: "lang/@textdomain.pot",
  domain: "@textdomain",
  package: "@theme"
});

[ctf0]

i use

new CleanWebpackPlugin([
            ''public/assets/',
            'public/vendor/',
            'public/images/'
        ]),

in ur case maybe try

new CleanWebpackPlugin({
        verbose: true,
        dry: true,
        cleanStaleWebpackAssets: false,
        protectWebpackAssets: false,
        cleanOnceBeforeBuildPatterns: ["public/**/*.css", "public/**/*.js", "!public/**/*.svg"]
      })