Как включить плагины webpack при использовании Laravel Mix?

Как мне включать плагины веб-пакетов, если я использую WebPack И Laravel Mix? Я не понимаю, в какой файл я добавляю код плагина.

Моя попытка ниже, похоже, не запускает мой плагин. Плагин должен сжимать файлы js, css, но это не так.

webpack.config.js:

  require('./node_modules/laravel-mix/src/index');
  require(Mix.paths.mix());

  // My plugin is here
  const CompressionPlugin = require('compression-webpack-plugin');

  Mix.dispatch('init', Mix);

  let WebpackConfig = require('./node_modules/laravel-mix/src/builder/WebpackConfig');

  module.exports = new WebpackConfig({
     plugins: [
      new CompressionPlugin({
        asset: "[path].gz[query]",
        algorithm: "gzip",
        test: /\.js$|\.css$|\.html$|\.svg$/,
        threshold: 10240,
        minRatio: 0.8
      })
    ],
  }).build();

webpack.mix.js:

  let mix = require('laravel-mix');

  mix.setPublicPath('dist')
     .js('src/app.js', 'scripts/')
     .extract([
        'jquery',
        'axios',
        'babel-polyfill',
        'lodash',
        'tether',
        'vue',
        'bootstrap-vue',
        'vuex',
        'vuex-localstorage',
     ])
     .sass('src/styles/app.scss', 'styles/')
     .copyDirectory('src/assets', 'dist/assets')
     .options({
        processCssUrls: false,
        uglify: true
      })
  .version();

Моя команда NPM:

node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=webpack.config.js

webpack laravel-mix

02.05.2018 15:44

Поиск всех неиспользуемых файлов в проекте

Количество файлов в проекте растет по мере его развития. И если быть по-настоящему честным, их продвижение происходит в геометрической прогрессии...

Настройка шаблона Metronic с помощью Webpack и Gulp

Я пишу эту статью, чтобы поделиться тем, как настроить макет Metronic с помощью Sass, поскольку Metronic предоставляет так много документации, и они...

16 761

Ответы 1

API Mix предоставляет полезный метод webpackConfig для настройки конфигурации веб-пакета.

https://laravel.com/docs/5.6/mix#custom-webpack-configuration

The webpackConfig method accepts an object, which should contain any Webpack-specific configuration that you wish to apply.

Я считаю, что следующий код должен работать.

webpack.mix.js:

const mix = require('laravel-mix');
const CompressionPlugin = require('compression-webpack-plugin');

mix.setPublicPath('dist')
  .js('src/app.js', 'scripts/')
  .extract([
    'jquery',
    'axios',
    'babel-polyfill',
    'lodash',
    'tether',
    'vue',
    'bootstrap-vue',
    'vuex',
    'vuex-localstorage',
  ])
  .sass('src/styles/app.scss', 'styles/')
  .copyDirectory('src/assets', 'dist/assets')
  .options({
    processCssUrls: false,
    uglify: true,
  })
  .webpackConfig({
    plugins: [
      new CompressionPlugin({
        asset: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.js$|\.css$|\.html$|\.svg$/,
        threshold: 10240,
        minRatio: 0.8,
      }),
    ],
  })
  .version();

Я понимаю, что вы приводите пример, но сжатие лучше обрабатывается на уровне NGINX.

— 02.09.2019 09:31

@jarodh Стоит отметить, что ключевым «активом» в блоке CompressionPlugin теперь должно быть «имя файла», в противном случае при построении выдается ошибка.

— 21.05.2020 22:43

Я вижу, что uglify не работает при использовании "скриптов" или методов "babel" вместо "js".

— 10.07.2020 06:12

04.05.2018 21:56