May 4, 2021
0
Level 1
Superfluous Mix Elements
Hello everyone. Please tell me how to remove unnecessary elements from webpack? I mean, when the npm run dev command is executed, it adds unnecessary elements to the js scripts, because of which half of the functions do not work for me. This is my first time working with Laravel 8 and Mix, learning ...
For example:
/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
/*!*************************************************!*\
!*** ./resources/assets/js/tiny-slider-init.js ***!
\*************************************************/
//Tiny slider
if (document.getElementsByClassName('tiny-three-item').length > 0) {
var slider = tns({
container: '.tiny-three-item',
controls: false,
mouseDrag: true,
loop: true,
rewind: true,
autoplay: true,
autoplayButtonOutput: false,
autoplayTimeout: 3000,
navPosition: "bottom",
speed: 400,
gutter: 12,
responsive: {
992: {
items: 3
},
767: {
items: 2
},
320: {
items: 1
}
}
});
}
;
if (document.getElementsByClassName('tiny-single-item').length > 0) {
var slider = tns({
container: '.tiny-single-item',
items: 1,
controls: false,
mouseDrag: true,
loop: true,
rewind: true,
autoplay: true,
autoplayButtonOutput: false,
autoplayTimeout: 3000,
navPosition: "bottom",
speed: 400,
gutter: 16
});
}
;
if (document.getElementsByClassName('tiny-two-item').length > 0) {
var slider = tns({
container: '.tiny-two-item',
controls: false,
mouseDrag: true,
loop: true,
rewind: true,
autoplay: true,
autoplayButtonOutput: false,
autoplayTimeout: 3000,
navPosition: "bottom",
speed: 400,
gutter: 12,
responsive: {
992: {
items: 2
},
767: {
items: 2
},
320: {
items: 1
}
}
});
}
;
if (document.getElementsByClassName('tiny-four-item').length > 0) {
var slider = tns({
container: '.tiny-four-item',
controls: false,
mouseDrag: true,
loop: true,
rewind: true,
autoplay: true,
autoplayButtonOutput: false,
autoplayTimeout: 3000,
navPosition: "bottom",
speed: 400,
gutter: 12,
responsive: {
992: {
items: 4
},
767: {
items: 2
},
320: {
items: 1
}
}
});
}
;
if (document.getElementsByClassName('tiny-six-item').length > 0) {
var slider = tns({
container: '.tiny-six-item',
controls: false,
mouseDrag: true,
loop: true,
rewind: true,
autoplay: true,
autoplayButtonOutput: false,
autoplayTimeout: 3000,
navPosition: "bottom",
speed: 400,
gutter: 12,
responsive: {
992: {
items: 6
},
767: {
items: 3
},
320: {
items: 1
}
}
});
}
;
/******/ })()
;
He adds these elements:
/******/ (() => { // webpackBootstrap
var __webpack_exports__ = {};
/*!*************************************************!*\
!*** ./resources/assets/js/tiny-slider-init.js ***!
\*************************************************/
/******/ })()
;
Short:
(() => {var __webpack_exports__ = {};})();
It's my Mix config:
mix
// Main
.css('resources/css/app.css', 'public/assets/css/laravel.app.css')
.css('resources/assets/css/bootstrap.min.css', 'public/assets/css')
.css('resources/assets/css/materialdesignicons.min.css', 'public/assets/css')
.css('resources/assets/css/tiny-slider.css', 'public/assets/css')
.sass('resources/assets/scss/style.scss', 'public/assets/scss')
.sass('resources/assets/scss/style-dark.scss', 'public/assets/scss')
.js('resources/assets/js/dip.app.js', 'public/assets/js/dip.app.js')
.js('resources/js/app.js', 'public/assets/js/laravel.app.js')
// Colors
.css('resources/assets/css/colors/default.css', 'public/assets/css/colors')
.css('resources/assets/css/colors/blue.css', 'public/assets/css/colors')
.css('resources/assets/css/colors/light-green.css', 'public/assets/css/colors')
.css('resources/assets/css/colors/red.css', 'public/assets/css/colors')
.css('resources/assets/css/colors/skyblue.css', 'public/assets/css/colors')
.css('resources/assets/css/colors/yellow.css', 'public/assets/css/colors')
// Js
.js('resources/assets/js/bootstrap.bundle.min.js', 'public/assets/js')
.js('resources/assets/js/typed.js', 'public/assets/js')
.js('resources/assets/js/typed.init.js', 'public/assets/js')
.js('resources/assets/js/tiny-slider.js', 'public/assets/js')
.js('resources/assets/js/tiny-slider-init.js', 'public/assets/js')
.js('resources/assets/js/feather.min.js', 'public/assets/js')
// Images
.copy('resources/assets/images', 'public/images')
Thanks in advance!
Please or to participate in this conversation.