0

I inherited a Vue2 app written in 2017/18. After a bunch of trial and error I finally have Webpack mix running and compiling the js and CSS files.

My webpack.mix.js is pretty simple:

let mix = require('laravel-mix');

mix.js('assets/js/app.js', 'dist/js/site.min.js').vue({ version: 2 });

mix.sass('assets/scss/styles.scss', 'dist/css/')
    .sass('assets/scss/fonts.scss', 'dist/css/')
    .sass('assets/scss/admin-styles.scss', 'dist/css/')
    .options({
        processCssUrls: false,
        uglify: true
    })
    .sourceMaps()

This compiles and the site loads. The issue is that the create js file is 8+mb.

If I switch to mix.babel it compiles down to ~5mb but then I get the dreadded:

Cannot use import statement outside a module (at site.min.js?ver=6:5:1)

I get the same issue if I use mix.minify. The file is then only like 17k which is likely not all the js.

How can I minify this massive js file and get a complete build that allows import statements?

TJ Sherrill
  • 2,465
  • 7
  • 50
  • 88

0 Answers0