После команды gulp собирает файлы как то кривовато. Помогите пожалуйста разобраться.
Структура такая :
папка js
-app.js
-папка modules
-- function.js
-- sliders.js
-- webp.js
В gulp настройка на сбор в единый файл.
import webpack from "webpack-stream";
export const js = () => {
return app.gulp.src(app.path.src.js, { sourcemaps: app.isDev })
.pipe(app.plugins.plumber(
app.plugins.notify.onError({
title: "JS",
message: "Error: <%= error.message %>"
}))
)
.pipe(webpack({
output: {
filename: 'scripts.js',
},
module: {
rules: [{
test: /\.m?js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
['@babel/preset-env', {
targets: "defaults"
}]
]
}
}
}]
},
devtool: !app.isBuild ? 'source-map' : false
}))
.on('error', function (err) {
console.error('WEBPACK ERROR', err);
this.emit('end');
})
.pipe(app.gulp.dest(app.path.build.js))
.pipe(app.plugins.browsersync.stream());
}
На выходе создаются лишние переменные, без них к сожалению js не работает а именно это
/******/ (() => { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./src/js/modules/functions.js":
/*!*************************************!*\
!*** ./src/js/modules/functions.js ***!
\*************************************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "isWebp": () => (/* binding */ isWebp)
/* harmony export */ });
/* Проверка поддержки webp, добавление класса webp или no-webp для HTML */
//Далее получаю чистый js без всяких примесей.
// скрипты из function.js
// скрипты из sliders.js
// скрипты из webp.js
