如何在 Laravel 7 中使用 Webpack.mix.js 使用多个 js？

Posted 2023-03-08

【中文标题】如何在 Laravel 7 中使用 Webpack.mix.js 使用多个 js？

【英文标题】：How to use multiple js using Webpack.mix.js in Laravel 7?

【发布时间】：2020-09-02 22:43:27

【问题描述】：

我的项目我正在使用 Bootstrap.js、Jquery.js、Jquery_validation.js 和一个 custom.js（针对项目特定规则）。

我只想在所有页面上使用一个 app.js。使用 webpack.mix 的最佳方式是什么？

我已经安装了 jquery 和 jquery-validation ，请给我建议。

package.json

"devDependencies": 
    "axios": "^0.19",
    "bootstrap": "^4.0.0",
    "cross-env": "^7.0",
    "jquery": "^3.2",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.13",
    "popper.js": "^1.12",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.20.1",
    "sass-loader": "^8.0.0",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.6.10"
,
"dependencies": 
    "jquery-validation": "^1.19.1",
    "savvy-js": "^1.0.7"

在资源/js/app.js中

require('jquery-validation');

require('./bootstrap');

window.Vue = require('vue');

webpack.mix

mix.js(['resources/js/app.js','resources/js/snavvy.js'], 'public/js')

.sass('resources/sass/app.scss', 'public/css') 。选项（ processCssUrls：假 );

那么请告诉我如何以最佳方式使用 bootstrap.js、jquery.js、jquery-validation.js 和 custom.js(resource/js/custom.js)？

【问题讨论】：

这是一个非常标准的 laravel 设置。在您的app.blade.php 中，您应该有<script src=" asset('js/app.js') "></script>，其中包含您创建的脚本。

是的，我正在使用它，但我有多个 js（bootstrap、jquery、jquery_validation 和一个自定义 js），所以需要将它们组合起来。

你运行“npm run production”了吗？

【参考方案1】：

webpack.mix.js 需要文件扩展名；文件夹不够。我通常将 .sass 链接到我的视图。类似的东西

//does not work
mix.js(['resources/js/app.js','resources/js/snavvy.js'], 'public/js');


//sucessful
mix.js('resources/js/app.js','public/js');

//or if you want a custom name
mix.js('resources/js/snavvy.js', 'public/js/custom_snavvy.js');

npm run dev

//or

npm run watch

祝你好运。

【讨论】：

我添加了带扩展名的文件名。 mix.js(['resources/js/app.js','resources/js/snavvy.js'], 'public/js/app.js')，但仍然无法正常工作。

尝试去掉 '[' 和 ']' 并将 .js 视图放在单独的 mix.js 类中。

这完全是“//成功”它

新编辑的答案在 public/js 文件夹中创建两个 js 文件，那么 webpack.mix 的优势是什么。

用相应的库将文件编译到某个目录。这只是一个语法问题

【参考方案2】：

这个解决方案对我有用：

mix.js([
    'resources/js/app.js',
    'resources/js/jquery-2.2.4.min.js',
    'resources/plugins/bootstrap-3.3.6/js/bootstrap.min.js',
     ...
], 'public/js/app.js').version();

Further Details