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

wtlkbnrh 于 2022-11-13 发布在 Webpack

关注(0)|答案(2)|浏览(306)

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

webpack

来源：https://stackoverflow.com/questions/73831740/why-does-changing-configurewebpack-in-vue-config-js-to-use-an-arrow-function-ins

2条答案

按热度按时间

ffscu2ro1#

为了回答你的问题，我把你的代码，并试图看看什么是不工作，首先不要忘记，vue.config.js是一个对象，谁将被合并到最终的webpack配置使用webpack-merge。
因此，当您执行config.plugins = []时，您会尝试使用webpack的默认配置来覆盖plugins Array，例如
VueLoaderPluginCaseSensitivePathsPluginFriendlyErrorsWebpackPlugin等等。
因此，当您执行此操作时，它们不再存在，因此用于检测路径的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);
              },
            },
          ],
        }),

它完美地工作！

赞(0）回复(0）举报 2022-11-13

vlurs2pr2#

箭头函数与匿名函数不同。箭头函数绑定到它们所在的作用域。对于大多数用例，更改匿名函数是可以的，并且会按预期工作，但并不总是如此。我的猜测是CopyPlugin或DefinePlugin希望某个函数在箭头函数绑定到的作用域之外。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

赞(0）回复(0）举报 2022-11-13

我来回答

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

2条答案

相关问题

热门标签

最新问答