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中实现这一目标。

理想情况下，输出将类似于：

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 Mix常见的块和供应商块

1 个答案: