Laravel-mix: Proposal : mix.extractVendor() to auto extract

[ankurk91]

Hi,

In one of my recent project; i had lots of 3rd party modules that needs to be extracted in a separate vendor.js file.
Sometime it become hassle to to keep extract list up to date.

mix.extract(
    [
      'package-1',
      'package-2',
      ....  
      'package-50',
    ]
);

I come up with this solution.

mix.webpackConfig({
  plugins: [
    // https://webpack.js.org/plugins/commons-chunk-plugin/
    new webpack.optimize.CommonsChunkPlugin({
      name: 'js/vendor',
      minChunks: function (module) {
        // This prevents stylesheet resources with the .css or .scss extension
        // from being moved from their original chunk to the vendor chunk
        if (module.resource && (/^.*\.(css|scss|less)$/).test(module.resource)) {
          return false;
        }
        return module.context && module.context.indexOf("node_modules") !== -1;
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: 'js/manifest',
      minChunks: Infinity
    }),
  ]
});

Above code will auto extract all modules that are coming from node_modules to the vendor.js file.
So; if you reference a module in your app.js like -

// app.js
import moment from 'moment';

In this case moment will be auto extracted to vendor.js.

Proposal
Have another method mix.extractVendor() (may be a better name) that will do the above.
This is similar to package discovery in Laravel, where you install a package and start using it in your code.
You no need to tweak your webpack.mix.js file every time when add or remove a package.

vue-cli is doing the same already, see

Thanks.

[trevorgehman]

Really cool idea.

[cosecantt]

Has it yet been implemented? Any idea? It is really hassle to track all

[ankurk91]

Not yet, the trick will no longer work with webpack v4.

[cosecantt]

I see. It is a really cool idea should be implemented in mix as default. It is working on [email protected] currently on my machine.

[ankurk91]

Finally released as a plugin

https://github.com/ankurk91/laravel-mix-auto-extract

[molerat619]

How could you use new webpack.optimize.CommonsChunkPlugin(...) in the first place? I get ReferenceError: webpack is not defined.

[ankurk91]

Just import before using it

[lkraav]

Seems to work great. Just curious, how come it didn't get adopted into Mix core?

Perhaps Webpack 4 will finally be solved now with the latest progress, but still, several months went by where this auto extract would've gained more ground perhaps.

Was there something non-obvious wrong with the underlying idea, or?

[ankurk91]

This feature has been landed in Laravel Mix v4.0 beta 2

https://github.com/JeffreyWay/laravel-mix/commit/c8e939416045d5f37af605dfa60dee8be64e9880

[theshashiverma]

help me please https://stackoverflow.com/questions/54234817/how-do-we-extract-css-chunks-file-in-laravel-with-vue