在主刀片文件中找不到 Laravel mix [chunkhash] 文件答案

【问题标题】：Laravel mix [chunkhash] file not found in main blade file在主刀片文件中找不到 Laravel mix [chunkhash] 文件
【发布时间】：2020-09-28 06:12:43
【问题描述】：

我正在使用 vue 路由器使用动态组件。最近我注意到我的供应商文件也导致了加载问题。我的供应商文件大小为 4mb+，prod 为 2mb+ Followed the tutorial 所以，我想使用“捆绑拆分”：为此我改变了我的混合配置：

    const path = require("path");
    mix.webpackConfig({
        resolve: {
            alias: {
                "@": path.resolve(__dirname, "resources/js/")
            }
        },
        output: {
            filename: 'js/vue/[name].js',
            chunkFilename: 'js/vue/[name].[chunkhash].js'
            // chunkFilename: mix.inProduction() ? "js/front/chunks/[name].[chunkhash].js" : "js/front/chunks/[name].js",
            //filename: '[name].[chunkhash].js',
            // path: path.resolve(__dirname, 'dist'),

        },
        optimization: {
            splitChunks: {
                 minSize: 10000,
                 maxSize: 250000,
            }
        },
----

但是当我使用 splitChunks 时，它会使我的供应商文件像 vendor~cd45250bd7e543e7b708.js 其他块文件也喜欢：108.4bcdcd35199c4fd01198.js 但在我之前的主刀片文件中，我链接的路径如下：

<script src="{!! asset('js/vue/manifest.js') !!} "></script>
{!! Html::script('js/vue/vendor.js') !!}
{!! Html::script('js/vue/app.js') !!}

现在没有找到 vendor.js 和 app.js，因为它们现在处于 chunkhashed 命名中。如何在主刀片文件中添加我的供应商 chunkhashed 文件？我的 package.json：

 "devDependencies": {
        "axios": "^0.18.0",
        "cross-env": "^5.1",
        "laravel-mix": "^4.1.4",
        "laravel-mix-bundle-analyzer": "^1.0.2",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.26.3",
        "sass-loader": "^7.3.1",
        "vue": "^2.6.11",
        "webpack-bundle-analyzer": "^3.5.2"
    },

提前致谢。

【问题讨论】：

标签： laravel vue.js laravel-mix

【解决方案1】：

看看你是否可以使用https://github.com/spatie/laravel-mix-preload，在我的项目中我不能使用它，所以我想出了以下方法，当然不是最好的，但我还没有找到更适合我的解决方案。它替换了 mix-manifest.json 中的哈希值，所以你应该用 if (mix.inProduction()) 包裹它。

mix.then((stats) => {
    const file = 'public/mix-manifest.json';
    const fs = require('fs');
    fs.readFile(file, 'utf8' , (err, data) => {
        if(err) throw err;
        const identifier = '#YOURFILEPATH#';
        for (let file of Object.keys(stats.compilation.assets)) {
            if (file.indexOf(identifier) == -1) {
                continue;
            }
            let correctHash = file.split(identifier)[1].slice(0,20);
            data = data.replace(data.split(identifier+'?id=')[1].slice(0,20), correctHash);
        }
        fs.writeFile(file, data, function(err) {
            err || console.log('Hashes changed \n', data);
        });
    });
});

【讨论】：