如何在 Laravel 刀片文件中链接由 webpack 创建的块

编程问答 2022-05-18

问题描述

我有一个很大的 app.js 和 vendor.js 文件，为了减小大小，我选择了将它们分成块的方法。

当我运行 webpack 时，它会创建许多分块文件，但我不知道如何在刀片布局中导入它们。

我尝试在网上研究它，但我能找到的只是拆分它们的方法，没有任何地方显示如何链接这些拆分的文件。

我想到的唯一想法是读取 mix-manifest.json 文件，遍历它然后将它们链接到刀片中，但这对我来说似乎不是一个好的解决方案。

她是我的 Webpack 配置

mix.setPublicPath('public/');
mix.webpackConfig({
    watchOptions: {
        ignored: /node_modules/
    },optimization :  {
        splitChunks: {
            chunks: "all",minSize: 200000,maxSize: 244000,}
    }
}).js('resources/js/app.js','public/js')
    .extract(['vue','jquery','bootstrap','@coreui/vue'])
    .extract(['@coreui/coreui','@coreui/icons'],'js/vendor~utils-2.js')
    .extract()
    .sass('resources/sass/app.scss','public/css')
    .version();

这是我如何链接我以前的 JS 脚本

<script src={{mix('/js/manifest.js')}}}></script>
<script src={{mix('/js/vendor.js')}}}></script>
<script src="{{ mix('/js/app.js') }}"></script>

这些是 webpack 在我的 public/js 文件夹中创建的块

Following are the chunks created by webpack

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

javascriptlaravellaravellaravel-mixwebpackwebpackwebpackwebpack-splitchunks