Как в gulp сборке не минифицировать js файл в build?

Question

[Roman S.]

Хочу при build сборке НЕ минифицировать основной js файл ( app.js )
Сборка от Фрилансер по жизни, делал её давно, поэтому не помню что к чему. Насколько я понял, здесь используется webpack ( webpack-stream ) для минифицирования и экспорта других файлов/библиотек в единый js файл.

JS:

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({
			mode: app.isBuild ? 'production' : 'development',
			output: {
				filename: 'app.min.js',
			}
		}))
		.pipe(app.gulp.dest(app.path.build.js))
		.pipe(app.plugins.browsersync.stream());
}

JS.JS ( После некоторых изменений ):

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({
			mode: 'development',
			optimization: {
				minimize: false
			},
			output: {
				filename: 'app.js',
			},
			resolve: {
				modules: [
					'node_modules'
				]
			},
			module: {
				rules: [
					{
						test: /\.js/,
						loader: 'babel-loader',
						exclude: /(node_modules|bower_components)/
					}
				]
			}
		}))
		.pipe(app.gulp.dest(app.path.build.js))
		.pipe(app.plugins.browsersync.stream());
}

APP..JS:

/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({

/***/ "./src/js/app.js":
/*!***********************!*\
  !*** ./src/js/app.js ***!
  \***********************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {

eval("__webpack_require__.r(__webpack_exports__); ...

Если нужна дополнительная информация, пожалуйста сообщите мне об этом, спасибо!

Comments

[ProjectSoft]

Roman S.
Попробуйте. Должно помочь

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(
				{
					mode: app.isBuild ? 'production' : 'development',
					optimization: {
						minimize: false
					},
					output: {
						filename: 'app.js',
					}
				}
			)
		)
		.pipe(
			app.gulp.dest(app.path.build.js)
		)
		.pipe(
			app.plugins.browsersync.stream()
		);
}

Я люблю форматированный код. Проще искать )))

[Roman S.]

ProjectSoft, К сожалению, не помогло. Вот что выходит в итоге:

/******/ (() => { // webpackBootstrap
/******/ 	"use strict";
/******/ 	var __webpack_modules__ = ({

/***/ "./node_modules/dom7/dom7.esm.js":
/*!***************************************!*\
  !*** ./node_modules/dom7/dom7.esm.js ***!
  \***************************************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {

...
По сути это и есть не сжатый код, но как сделать так чтобы он все это не писал, а просто собрал модули, не понятно(

[ProjectSoft]

Roman S., так модули подключите.

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(
				{
					mode: app.isBuild ? 'production' : 'development',
					optimization: {
						minimize: false
					},
					output: {
						filename: 'app.js',
					},
					resolve: {
						modulesDirectories: [
							'node_modules'
						]
					},
					module: {
						loaders: [
							{
								test: /\.js/,
								loader: 'babel',
								exclude: /(node_modules|bower_components)/
							}
						]
					}
				}
			)
		)
		.pipe(
			app.gulp.dest(app.path.build.js)
		)
		.pipe(
			app.plugins.browsersync.stream()
		);
}

Но нужен установленный babel-loader
npm install babel-loader --save

[Roman S.]

ProjectSoft, Сделал как вы описали, выдает ошибку ValidationError: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
Не могли бы вы внести изменения, чтобы каждый раз не писать, если не сложно конечно. Ссылка на сборку dropbox.

[ProjectSoft]

Roman S., не могу )))
Я сейчас на работе под ЕСПД сижу. Он блокирует установку многих модулей npm.
Если только завтра из дома.

[Roman S.]

ProjectSoft, Хорошо, а то это растянется на долго, вопрос-ответ. Спасибо заранее!

[Roman S.]

ProjectSoft, Извините за беспокойство, вы сможете посмотреть сегодня? Немного сроки поджимают