webpack.mix.js

const mix = require('laravel-mix')

// Webpack 5.106+ validates ProgressPlugin options strictly. webpackbar (Mix's progress bar)
// subclasses ProgressPlugin but stores its own options on `this.options`, which fails
// validation. Dropping WebpackBar only removes the fancy CLI progress bar; the build is unchanged.
mix.override((config) => {
  config.plugins = (config.plugins || []).filter(
    (p) => !p || p.constructor.name !== 'WebpackBarPlugin'
  )
})

mix
  .webpackConfig({
    node: {
      global: false,
    },
  })
  .copy('src/app.html', 'dist/')
  .copy('src/manifest.json', 'dist/')
  .copyDirectory('src/assets/img', 'dist/img')
  .js('src/assets/js/app.js', 'dist/')
  .js('src/background.js', 'dist/')
  .js('src/content.js', 'dist/')
  .vue({
    options: {
      compilerOptions: {
        // Ignore our <content> tag in App.vue
        isCustomElement: (tag) => tag === 'content',
      },
    },
  })
  .postCss('src/assets/css/app.css', 'dist/', [require('@tailwindcss/postcss')])