时间戳

首页 > 解决方案 > 如何在 Laravel 7 中使用 Webpack.mix.js 使用多个 js？

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

问题描述

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

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

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

包.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') .options({ processCssUrls: false });

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

标签： jquerynode.jslaravelwebpacklaravel-7

解决方案

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

祝你好运。

推荐阅读