为什么将 vue.config.js 中的 configureWebpack 更改为使用箭头 function 而不是 object 会破坏配置？

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提供了一个 object 。 我尝试将其更改为使用箭头 function ，如下所示：

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 的参数。 我错过了什么？ 谢谢！

Answer 1

为了回答您的问题，我使用了您的代码并尝试查看有什么问题，首先不要忘记vue.config.js是一个 object ，它将使用webpack-merge合并到最终的webpack配置中。

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

VueLoaderPlugin CaseSensitivePathsPlugin FriendlyErrorsWebpackPlugin等...

因此，当您这样做时，它们不再存在，因此检测路径的loader会理解vue文件，并且所有这些都消失了，这就是您收到错误的原因。

记住您选择使用configureWebpack作为 function 您现在需要将插件键视为一个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

箭头函数与匿名 function 不同。 箭头 function 绑定到它们所在的 scope。对于大多数用例，更改匿名 function 很好，并且会按预期工作，但并非总是如此。 我的猜测是CopyPlugin或DefinePlugin期望 scope 中的某些东西不在箭头 function 所绑定的 scope 中。

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