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

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的参数。我缺少什么？谢谢

Answer 1

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

因此，当你执行config.plugins = []时，你试图用他的默认配置(如(覆盖webpack的plugins阵列

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);
},
},
],
}),

它工作得很好！

Answer 2

箭头函数与匿名函数不同。箭头函数绑定到它们所在的范围。对于大多数用例，更改匿名函数是可以的，并且可以按预期工作，但并不总是如此。我的猜测是，CopyPlugin或DefinePlugin中的任何一个都期望某个范围内的东西不在箭头函数绑定的范围内

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