时间戳

首页 > 解决方案 > 版本功能不适用于 Laravel Mix 中的 JS 文件

laravel - 版本功能不适用于 Laravel Mix 中的 JS 文件

问题描述

我编写了以下代码，将 CSS 和 JS 文件与 Webpack.mix.js 和正确的结果结合在一起，但是版本功能不适用于 JS 文件！我该怎么做才能让它正确，CSS和JS都成为版本？

webpack.mix.js

mix.setPublicPath('/')
    .copy('node_modules/bootstrap/dist/js/bootstrap.js', 'resources/js')
    .copy('node_modules/jquery/dist/jquery.js', 'resources/js')
    .scripts([
        'resources/js/bootstrap.js',
        'resources/js/jquery.js'
    ], 'resources/js/app.js');

mix.sass('resources/sass/app.scss', 'public/css')
    .styles([
        'public/css/app.css',
        'public/css/myCss.css'
    ], 'public/css/all.css')
    .js('resources/js/app.js', 'public/js')
    .version();

混合清单.json

{
    "/css/app.css": "/css/app.css?id=35978cdc6a38f7d64fbb",
    "/css/all.css": "/css/all.css?id=eda19119aa76ef087fde"
}

我添加<script src="{{ mix('js/all.js') }}"></script>到我的刀片文件中

标签： laravelwebpacklaravel-mix

解决方案

相反，像这样构建你的 webpack.mix.js 配置。

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .styles([
        'public/css/myCss.css'
    ], 'public/css/all.css')
    .version();

确保已安装 jQuery 和 Bootstrap。你可能还想将 Laravel Mix 更新到最新版本。

npm install bootstrap
npm install jquery
npm install laravel-mix

在顶部的 /resources/js/bootstrap.js 中，添加或修改这些行。这会在您的应用程序中加载 jQuery 和 Bootstrap。

window._ = require('lodash');

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

在 /resources/sass/app.scss 中：

@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

编译你的资产。

npm run production

您现在有两个 CSS 文件引用，都位于模板 Blade 文件的顶部。

<script src="{{ mix('css/app.css') }}"></script>
<script src="{{ mix('css/all.css') }}"></script>

在模板的底部，使用app.js：

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

请注意，您的 mix-manifest 文件现在包含此内容。

{
    "/js/app.js": "/js/app.js?id=0b5e26cf3116bf443cac",
    "/css/app.css": "/css/app.css?id=a99cdff2ed9d413fcb8a",
    "/css/all.css": "/css/all.css?id=a99cdff2ed9d413fcb8a"
}

推荐阅读