如何使用 Webpack 链语法正确设置 optimization.splitChunks.automaticNameDelimiter 值？

Question

我想在使用 Vue CLI vue.config.js 设置时修改 splitChunks.automaticNameDelimiter Webpack 设置，但我不太了解所需的语法。

此默认分隔符是 ~，这会导致我尝试将我的应用程序上传到的环境出现问题。我想改用 - 分隔符。

Modifying Options of a Plugin 的 Vue CLI 文档建议我应该这样做：

// vue.config.js

module.exports = {
  productionSourceMap: false,
  publicPath: '/app/',
  chainWebpack: config => {
    config
      .plugin('optimization')
      .options('splitChunks', { automaticNameDelimiter: '-' })
  }
}

以上是不正确的，但是从 webpack-chain docs 不明白我应该做什么而不是用链接语法修改 optimization.splitChunks.automaticNameDelimiter？

请帮忙！非常感谢。

不会像webpack.config.js那样进行设置，显然是无效的：

// vue.config.js

module.exports = {
  productionSourceMap: false,
  publicPath: '/app/',
  optimization: {
    splitChunks: {
      automaticNameDelimiter: '-'
    }
  }
}

当前使用的软件包版本 webpack 4.45.0 和 webpack-chain 6.5.1

Answer 1

试试这个。 more info

// vue.config.js
module.exports = {
  productionSourceMap: false,
  publicPath: '/app/',
  chainWebpack: config => {
        config.optimization.splitChunks({
            ...config.optimization.get('splitChunks'),
            automaticNameDelimiter: '-'
        })
  }
}

Answer 2

Webpack Chain 模块还公开了 merge(...) 链式映射上的方法，例如 config.optimization。您可以使用它作为替代和更简洁的语法：

// vue.config.js
module.exports = {
  productionSourceMap: false,
  publicPath: '/app/',
  chainWebpack: (config) => {
    config.optimization.merge({
      splitChunks: { 
        automaticNameDelimiter: '-'
      }
    });
  },
};

如何使用 Webpack 链语法正确设置 optimization.splitChunks.automaticNameDelimiter 值？

How to correctly set optimization.splitChunks.automaticNameDelimiter value using Webpack chain syntax?

config

webpack

vue.js

vuejs3