Laravel一般的なチャンクとベンダーのチャンクを混ぜる

Question

Laravel v5.5で複数のアプリケーションを構築し、Laravel Mix v1.6.2を使用して資産をコンパイルしています。私は各ページのためにエントリーポイントを定義しています。私はは別々のベンダーの出力チャンクにベンダーのモジュールにを抽出しています：

mix.js('resources/assets/js/page1.js', 'public/js') 
.js('resources/assets/js/page2.js', 'public/js') 
.extract('vue'); 

私は何も達成したいことは、複数（2以上）のページ/エントリの間で共有されている私が書いたモジュールを、持っていますポイントは、別のチャンク（例えばcommons.js）に自動的に抽出されます。

mix.webpackConfig({ 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: "commons", 
      filename: "js/commons.js", 
      minChunks: 2 
     }) 
    ] 
}); 

しかし、これは（mix.extractと一緒に動作しません）：私はこれでそれを行うことができます。私は例を見たことがあるhere。しかし、これをLaravel Mixでどのように達成するかは不明です。

理想的出力のようなものであろう：Laravelミックスソースかかわらず外観を有する後

Answer 1

js/ 
|- page1.js 
|- page2.js 
|- commons.js 
|- vendor.js 

、I）は、（アレイmix.jsに提供することを実現し（抽出）だけ使用されています。私はちょうどカスタムconfigを使用してどこでも使用されている自分のnode_modulesのエントリーポイントを指定し、エントリーポイント名はチャンク名と一致しました。 4出力ファイル内

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

mix.js('resources/assets/js/page1.js', 'public/js') 
    .js('resources/assets/js/page2.js', 'public/js'); 

mix.sass('resources/assets/sass/app.scss', 'public/css'); 

mix.webpackConfig({ 
    entry: { 
     vendor: [ 
      'vue', 
      'axios', 
      'lodash', 
      'promise-polyfill', 
      'setasap' 
     ] 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      names: ["commons", "vendor"], 
      filename: 'js/[name].js', 
      minChunks: 2 
     }) 
    ] 
}); 

この結果：

js/ 
|- page1.js 
|- page2.js 
|- commons.js 
|- vendor.js