使用 Laravel Mix 时如何包含 webpack 插件？

Posted 2023-02-22

【中文标题】使用 Laravel Mix 时如何包含 webpack 插件？

【英文标题】：How to include webpack plugins when using Laravel Mix?

【发布时间】：2018-10-12 15:43:22

【问题描述】：

如果我使用 WebPack 和 Laravel Mix，我应该如何包含 webpack 插件？我很困惑我将插件代码添加到哪个文件中。

我的以下尝试似乎没有运行我的插件。插件应该是压缩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

【参考方案1】：

Mix 的 API 提供了一个有用的 webpackConfig 方法来调整 webpack 配置。

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

webpackConfig 方法接受一个对象，该对象应包含您希望应用的任何特定于 Webpack 的配置。

我相信下面的代码应该可以工作。

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 层处理得更好

@jarodh 值得注意的是，CompressionPlugin 块中的关键“资产”现在应该是“文件名”，否则构建会引发错误

我看到 uglify 在使用“脚本”或“babel”方法而不是“js”时不起作用。