在Laravel Mix中引入Webpack插件的方法及问题排查

Hey, let's fix that CompressionPlugin issue you're having with Laravel Mix. The key thing to remember is Laravel Mix wraps Webpack, so you shouldn't modify the raw webpack.config.js directly for most cases—instead, use Mix's built-in methods to extend the configuration. Here's how to get it working properly:

Step 1: Ensure the plugin is installed #

First, double-check you've added compression-webpack-plugin as a dev dependency. Run this in your project root:

npm install compression-webpack-plugin --save-dev
# Or if you use Yarn:
yarn add compression-webpack-plugin --dev

Step 2: Configure the plugin in webpack.mix.js #

This is the correct file for adding Webpack plugins with Laravel Mix—Mix reads this file to generate the final Webpack config. Here's a complete example:

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

// Your base Laravel Mix setup
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

// Extend Webpack with the compression plugin
mix.webpackConfig({
    plugins: [
        new CompressionPlugin({
            // Target only JS and CSS files (matches your original goal)
            test: /\.(js|css)$/,
            // Output compressed files with a .gz suffix
            filename: '[path][base].gz',
            // Use gzip compression algorithm
            algorithm: 'gzip',
            // Only compress files larger than 8KB (adjust this value as needed)
            threshold: 8192,
            // Keep the compressed file only if it reduces size by 20% or more
            minRatio: 0.8
        })
    ]
});

Why your original approach didn't work #

When you modified webpack.config.js directly, Laravel Mix's internal configuration pipeline didn't pick up your plugin. Mix dynamically builds the final Webpack config based on the setup in webpack.mix.js, so adding plugins there ensures they're properly integrated into the build process.

Verify the plugin is working #

Run your production build command (compression is typically used for production builds):

npm run prod

Check your public/js and public/css directories—you should see .gz versions of your compiled JS and CSS files alongside the original ones.

If you need to add other Webpack plugins later, follow the same pattern: install the plugin, require it in webpack.mix.js, and add it to the plugins array inside mix.webpackConfig().

内容的提问来源于stack exchange，提问作者sazr