Laravel-mix: Compatibility with WebPack 5

[panayotoff]

Hi all,
It's not issue as much as a discussion. Webpack 5 is coming up read more.
It would be great if Mix switches to WebPack 5 as soon as it's released so mix users can get the benefits of faster compile, smaller bundle sizes, etc.

[skeeith]

and will probably fix all the other issues we are having, still currently stuck at Mix v2 because of the dynamic import issues.

[panayotoff]

Yes, also fixing the Vue template compiler dependency

[skeeith]

Yes, also fixing the Vue template compiler dependency

What about the template compiler dependency? something wrong with it?

[panayotoff]

What about the template compiler dependency? something wrong with it?

Well, a lot of people are using Mix as general build tool ( so don't have to configure Webpack anew every 6 months or so ) without Vue. I think the defaults should be as less opinionated as possible, while still allowing to extend. Just vue-template-compiler as hard dependency is not a sensible default.

[skeeith]

Isn't the default already less opinionated as it is? a fresh Laravel app doesn't have any scaffolding at all. just the basic needs you need.
you need to set up it up with laravel/ui if you want a vue or react scaffolding ready for your app.

[panayotoff]

Yes, it is not much opinionated, just Mix is used in a lot of projects outside Laravel. The biggest strength is the stable api and painless upgrades. A lot of codekit users migrated to Mix, also it is used in Wordpress projects much more than people expect. The API that makes it easy to copy and combine files, not just to import them makes Mix perfect for migrating older projects to modern JS. I've done it couple of times ( had to update Backbone project from not touched from 2015 last year ) and making it work with Mix was a breeze.

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

const proxy = process.env.MIX_PROXY || 'https://project.localhost/';
const port = process.env.MIX_PORT || 5858;

const PATHS = {
  src: 'src',
  dist: '.',
  proxy
};

mix
  .disableSuccessNotifications()
  .setPublicPath(PATHS.dist)
  .options({ processCssUrls: false })
  .js(`${PATHS.src}/js/app.js`, `${PATHS.dist}/assets/js`)
  .sass(`${PATHS.src}/scss/style.scss`, `${PATHS.dist}/assets/css`)
  .browserSync({
    ui: false,
    injectChanges: true,
    notify: false,
    port,
    proxy: `${PATHS.proxy}`,
    logLevel: 'silent',
    files: [`${PATHS.dist}/*.*`]
  });

if (mix.inProduction()) {
  mix.options({ postCss: [require('postcss-sort-media-queries')({ sort: 'mobile-first' })] });
} else {
  mix.webpackConfig({ devtool: 'source-map' }).sourceMaps();
}

This is a boilerplate you will find in a lot of Wordpress projects. No Vue, no Laravel related stuff. This is what I ment by dropping the vue-template-compiler dependency.

[3zzy]

Looking at the milestone (https://github.com/webpack/webpack/milestone/18) it seems WebPack 5 is still a good 6 months away if not more. :(

[roitto]

Looking at the milestone (https://github.com/webpack/webpack/milestone/18) it seems WebPack 5 is still a good 6 months away if not more. :(

I would not be too sure about that. They have already updated the webpack sites main documentations to webpack 5.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.