为什么将configureWebpack在vue.config.js中更改为使用箭头函数而不是对象破坏配置？

Question

我有以下vue.config.js文件：

const fs = require('fs');
const util = require('util');
const webpack = require('webpack');
const CopyPlugin = require('copy-webpack-plugin');
const path = require('path');
const vtkChainWebpack = require('vtk.js/Utilities/config/chainWebpack');
const packageJson = require('./package.json');

const stat = util.promisify(fs.stat);

module.exports = {
  devServer: {
    port: 8081,
    public: process.env.PUBLIC_ADDRESS,
  },
  lintOnSave: false,
  publicPath: process.env.VUE_APP_STATIC_PATH,
  configureWebpack: {
    devtool: 'eval-source-map',
    plugins: [
      new CopyPlugin({
        patterns: [
          {
            from: path.join(__dirname, 'node_modules', 'itk'),
            to: 'itk',
            filter: async (resourcePath) => {
              const resourceStats = await stat(resourcePath);
              const resourceSize = resourceStats.size;
              return resourceSize <= (25 * 1024 * 1024);
            },
          },
        ],
      }),
      new webpack.DefinePlugin({
        'process.env': {
          VERSION: JSON.stringify(packageJson.version),
        },
      }),
    ],
    performance: {
      maxEntrypointSize: 4000000,
      maxAssetSize: 40000000,
    },
  },
  chainWebpack: (config) => {
    vtkChainWebpack(config);
  },
};

它为configureWebpack提供一个对象。我尝试将其更改为使用如下箭头函数：

configureWebpack: config => {
  config.devtool = 'eval-source-map';
  config.plugins = [
    new CopyPlugin({
      patterns: [
          {
            from: path.join(__dirname, 'node_modules', 'itk'),
            to: 'itk',
            filter: async (resourcePath) => {
              const resourceStats = await stat(resourcePath);
              const resourceSize = resourceStats.size;
              return resourceSize <= (25 * 1024 * 1024);
            },
          },
        ],
      }),
      new webpack.DefinePlugin({
        'process.env': {
          VERSION: JSON.stringify(packageJson.version),
        },
      }),
    ];
    config.performance = {
      maxEntrypointSize: 4000000,
      maxAssetSize: 40000000,
    };
  },
  chainWebpack: (config) => {
    vtkChainWebpack(config);
  },
};

当我运行npm run serve (与vue-cli-service serve一样)时，它会启动webpack，但似乎会无限期地挂起，而不会显示任何有关捆绑的常见消息。

如果我最终尝试访问该站点，它会引发一个错误，即无法解析favicon.ico的param。我遗漏了什么？谢谢!

Answer 1

为了回答您的问题，我使用了您的代码，并试图查看哪些不工作，首先不要忘记，vue.config.js是一个对象，它将使用webpack-merge合并到最终的webpack配置中。

因此，当您执行config.plugins = []时，您尝试用他的默认配置覆盖webpack的plugins数组，如

VueLoaderPlugin，CaseSensitivePathsPlugin，FriendlyErrorsWebpackPlugin等.

因此，当您这样做时，它们已经不存在了，所以用于检测路径的loader会理解vue文件，并且所有这些文件都会消失，这就是为什么您会得到一个错误。

记住，您选择使用configureWebpack作为一个函数，您现在需要像我所说的那样将插件键作为一个array来处理，并将您的新插件推入其中，或者通过搜索不符合您所需内容的插件直接覆盖所需的插件。

使用您的配置的示例：

  configureWebpack: config => {
    console.log("configureWebpack", config.plugins)
    config.plugins.push(
     new webpack.DefinePlugin({
       'process.env': {
         VERSION: JSON.stringify(packageJson.version),
       },
     }),
    )
  }

或

  configureWebpack: config => {
    console.log("configureWebpack", config.plugins)
    config.plugins = [
     ...config.plugins,
     new webpack.DefinePlugin({
       'process.env': {
         VERSION: JSON.stringify(packageJson.version),
       },
     }),
    ]
  }

问题的第二部分，也许我弄错了

在您的new CopyPlugin中，您似乎在复制一个名为itk的插件，我猜它等于vtk？可能是拼写错误或错误，所以当我试图将其更改为：

        new CopyPlugin({
          patterns: [
            {
              from: path.join(__dirname, 'node_modules', 'vtk.js'),
              to: 'vtk',
              filter: async (resourcePath) => {
                const resourceStats = await stat(resourcePath);
                const resourceSize = resourceStats.size;
                return resourceSize <= (25 * 1024 * 1024);
              },
            },
          ],
        }),

它工作得很好！

Answer 2

箭头函数与匿名函数不一样。箭头函数绑定到它们所在的作用域。在大多数情况下，更改匿名函数是很好的，并且会像预期的那样工作，但并不总是这样。我的猜测是，CopyPlugin或DefinePlugin都希望在箭头函数所绑定的作用域之外的作用域中。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions