Javascript Laravel混合公共区块和供应商区块
我正在使用LaravelV5.5构建一个多页面应用程序,并使用LaravelMixV1.6.2编译我的资产。我正在为每个页面定义一个入口点。我正在将供应商模块提取到一个单独的供应商输出块中:Javascript Laravel混合公共区块和供应商区块,javascript,laravel,webpack,laravel-mix,Javascript,Laravel,Webpack,Laravel Mix,我正在使用LaravelV5.5构建一个多页面应用程序,并使用LaravelMixV1.6.2编译我的资产。我正在为每个页面定义一个入口点。我正在将供应商模块提取到一个单独的供应商输出块中: mix.js('resources/assets/js/page1.js', 'public/js') .js('resources/assets/js/page2.js', 'public/js') .extract('vue'); 我还想实现的是让我编写的模块在多个(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()一起使用。我看过这些例子。但不确定如何在Laravel Mix中实现这一点
理想情况下,输出类似于:
js/
|- page1.js
|- page2.js
|- commons.js
|- vendor.js
在查看了Laravel Mix源代码之后,我意识到提供给Mix.js().extract()的数组只是用来创建入口点,因此我没有使用extract(),而是使用自定义配置来指定在任何地方都使用的节点模块的入口点,入口点名称与块名称匹配
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中,现在提供了一个函数来帮助实现这一点。