Как в Laravel Mix добавить модули компилирования js?

Question

[madc0de]

Разрабатываю сайты использую gulp

const {src, dest} = require("gulp");
const gulp = require("gulp");
const autoprefixer = require("gulp-autoprefixer");
const cssbeautify = require("gulp-cssbeautify");
const cssnano = require("gulp-cssnano");
const imagemin = require("gulp-imagemin");
const plumber = require("gulp-plumber");
const rename = require("gulp-rename");
const rigger = require("gulp-rigger");
const sass = require("gulp-sass");
const uglify = require('gulp-uglify-es').default;
const concat = require("gulp-concat");
const removecomments = require("gulp-strip-css-comments");

function css() {
    return src(path.src.css, { base: "src/assets/sass/" })
        .pipe(plumber())
        .pipe(sass())
        .pipe(autoprefixer({
            Browserslist: ['> 5% or last 8 versions']
        }))
        .pipe(cssbeautify())
        .pipe(dest(path.build.css))
        .pipe(cssnano({
            discardComments: {
                removeAll: true
            }
        }))
        .pipe(removecomments())
        .pipe(rename({
            suffix: ".min",
            extname: ".css"
        }))
        .pipe(dest(path.build.css))
        .pipe(browsersync.stream());
}

function js() {
    return src(path.src.js, {base: "./src/assets/js/"})
        .pipe(plumber())
        .pipe(rigger())
        .pipe(uglify())
        .pipe(concat('app.js'))
        .pipe(rename({
            suffix: ".min",
            extname: ".js"
        }))
        .pipe(dest(path.build.js))
        .pipe(browsersync.stream());
}

примерно такое, не считая обработки картинок.

Сейчас на laravel нужно разработать проект и вот уже 2 дня сижу и не понимаю как там можно сделать аналогичную конструкцию?

Примерно одни и те же документации. Не пойму чем отличается webpack.mix.js от webpack.config.js(если установить через nmp)

Хотя бы понять как минимум делать для разработки, чтобы js сжимались через uglify, читался es6 возможно с переводом через babel. А все файлы склеивались и на выходе в min.js получали готовый билд.

Хотя бы свежие статьи, где это описано. Или готовый пример.

Answer 1

[profesor08]

Отличается тем, что webpack.mix.js это надстройка над webpack.config.js.

Мой конфиг, проксирует запросы на сайт, тем самым у меня появляется хороший авторелоад при редактировании всего. На 3001 порту поднимается сам ларавель php artisan serve --port=3001

const mix = require("laravel-mix");
const webpack = require("webpack");

mix
  .browserSync({
    host: "0.0.0.0",
    port: "3000",
    proxy: "http://127.0.0.1:3001",
    logConnections: false,
    notify: false
  })
  .js("resources/js/app.js", "public/js")
  .disableSuccessNotifications()
  .sass("resources/sass/app.scss", "public/css")
  .webpackConfig({
    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery"
      })
    ]
  });

Тут же есть вызов метода webpackConfig, в который ты можешь добавить все, что касается вебпака.

P.S. Твой конфиг галпа жуть. Пересмотри необходимось всех тех вещей при разработке и в продакшене.

Comments

[madc0de]

Спасибо.
убрал import jquery from 'jquery' из файла
прописал вебконфиг и все заработало. С остальным по документации разобрался. Получается с вебпаком осталось разобраться до конца.
Только не ясно как сжимать например исходный файл и переименовывать? чтобы на выходе и js и css файлы сжаты были и назывались app.min.*

А что с галпом не так? У меня в js все файлы склеиваются, обжимаются, переименовываются + автообновление настроение от изменений и очищение папки билда + сжатие фото. Могу полный лист выложить.

[profesor08]

madc0de, открой package.json и посмотри раздел scripts, там все необходимое для разработки есть

[madc0de]

profesor08, ничего полезного нету по вопросу в разделе scripts. Но хорошо что нашел решение Как добавить минимизацию css в webpack?
Ответ с примером, как и что делать.

[profesor08]

madc0de, значит так смотрел, потому что там все это есть.