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 个或更多）pages/entry-points 之间共享，自动提取到一个单独的块（例如 commons.js）。我可以这样做：

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

但这不能与 mix.extract() 一起使用。我看过示例 here。但不确定如何在 Laravel Mix.
中完成此操作
理想情况下，输出类似于：

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

Answer 1

查看 Laravel Mix 源后，我意识到提供给 mix.js().extract() 的数组只是用于创建入口点，而不是使用extract() 我只是使用自定义配置为我的 node_modules 指定入口点，这些入口点在任何地方都在使用，入口点名称与块名称匹配。

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
        })
    ]
});

这会产生 4 个输出文件：

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

Laravel 混合公共块和供应商块

Laravel Mix common chunk and vendor chunk

javascript

laravel

webpack

laravel-mix