How to include webpack plugins when using Laravel Mix?

Question

How should I include webpack plugins if I use WebPack AND Laravel Mix? I am confused which file I add the plugin code into.

My below attempt doesn't seem to be running my plugin. The plugin should be compressing the js, css files but its not.

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(); 

My NPM command is:

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

Answer 1

Mix's API provides a useful webpackConfig method for adjusting the webpack config.

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.

I believe the following code should work.

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();