在 S3 中上传时的 Laravel-mix 版本控制认为以前的哈希答案

【问题标题】：Laravel-mix versioning when uploaded in S3 thinks in previous hash在 S3 中上传时的 Laravel-mix 版本控制认为以前的哈希
【发布时间】：2019-08-06 16:11:36
【问题描述】：

使用webpack-s3-plugin npm 包，我将我的 laravel-mix 编译和版本控制文件保存到 S3（用于 cdn 目的）。

记住，这一直有效到昨天。

let webpackPlugins = [];
if (mix.inProduction() && process.env.UPLOAD_S3) {
    webpackPlugins = [
        new s3Plugin({
            include: /.*\.(css|js)$/,
            s3Options: {
                accessKeyId: process.env.AWS_KEY,
                secretAccessKey: process.env.AWS_SECRET,
                region: process.env.AWS_REGION,
            },
            s3UploadOptions: {
                Bucket: process.env.ASSETS_S3_BUCKET,
                CacheControl: 'public, max-age=31536000'
            },
            basePath: 'assets/' + process.env.APP_ENV,
            directory: 'public'
        })
    ]
}

mix.scripts([   // I also tried '.combine'
    'resources/js/vendor/vendor/jquery.slimscroll.js',
    'resources/js/vendor/custom/theme-app.js',
], 'public/js/scripts.js')

// Other bundling stuff

.js([...].version()

mix.webpackConfig({
    plugins: webpackPlugins
});

现在，S3 的 eTag 与 mix-manifest.json 哈希不匹配。而且，当我访问该页面时，它会获取 1 个版本，而不是最新上传的版本，而是 1 个以前的版本。但是，当我检查 S3 上的“更新日期”时，它是正确的。然而，它只是落后了一个版本。

我怀疑它是在捆绑完成之前上传到 s3；但是我不确定。我在这里错过了什么？

^{如果你想详细了解 laravel 方面，我使用了this guide。}

【问题讨论】：

您找到解决方案了吗？我相信这是因为您使用的是mix.scripts。插件似乎只检测到使用mix.js 和 CSS 预处理器编译的资产。我已经尝试了一切......我正在进入可能不得不分叉回购的阶段。如果您在每次构建之前使用 clean-webpack-plugin 删除文件，那么您会注意到除非使用上述处理器进行处理，否则不会上传任何文件。我怀疑这可能与 Laravel mix 如何利用 webpack 有关，因为该插件据说使用了构建清单......
它神奇地为我修复了（或者我无法弄清楚它是如何修复的）。如果您找到解决方案，请告诉我
我对库做了一个小的修改并创建了一个拉取请求。我目前正在等待完成一个新版本
到 Laravel 混合？如果能分享给我就好了
不，到 S3 插件。它目前正在等待发布，但令人讨厌的是构建失败了，我不知道为什么，可能是某种单元测试......如果你想自己手动修复它，这真的很容易（它只是很脏）。将 S3 插件压缩源从 node_modules 目录复制到您的项目中，然后搜索行 t.hooks.afterEmit.tapPromise 并更改为 t.hooks.done.tapPromise。然后在你的 webpack 配置中引用这个插件。我知道这很脏，但在推送最新版本之前它应该只是暂时的

标签： laravel amazon-s3 npm webpack laravel-mix

【解决方案1】：

在深入了解 S3 插件源之后，我相当确信这是由用于触发 S3 上传的钩子引起的。我对 webpack 插件了解得不够多，无法对此进行完整描述，但我已经对导致问题的原因进行了有根据的猜测，并且我提出的修复似乎已经解决了问题。

插件的作者已经接受了我的拉取请求，目前正在等待发布修复。

如果您同时需要修复，那么您可以这样做（注意，这很脏，应该被视为临时的）：

浏览到您的node_modules 文件夹
找到名为webpack-s3-plugin的文件夹
复制文件dist/s3_plugin.js
粘贴到项目中的某处
打开文件并找到t.hooks.afterEmit.tapPromise这一行
替换为t.hooks.done.tapPromise
在您的webpack.mix.js 文件中，将require('webpack-s3-plugin') 更改为指向您的javascript 文件

重申一下，在最新版本的插件发布之前，这是一个临时修复。

【讨论】：

太棒了！感谢您的提醒和努力！请问可以链接PR url吗？