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

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

Posted by: admin November 26, 2021 Leave a comment

Questions:

I’m looking to modify the splitChunks.automaticNameDelimiter Webpack setting when using Vue CLI vue.config.js settings, but I don’t quite understand the required syntax.

This default delimiter character is a ~ and this is causing problems with the environment I am trying to upload my application to. I want to use - delimiters instead.

The Vue CLI docs for Modifying Options of a Plugin suggest that I should be doing something like this:

// vue.config.js

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

This above is not correct, but don’t understand from the webpack-chain docs what I should be doing instead to modify the optimization.splitChunks.automaticNameDelimiter with the chaining syntax?

Please help! Many thanks in advance.

It will not take the settings like in the same way as webpack.config.js, which is apparently invalid:

// vue.config.js

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

Currently using package versions webpack 4.45.0 and webpack-chain 6.5.1

Answers:

Try this. more info

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

###

Webpack Chain module also exposes the merge(...) method on chained maps like config.optimization. You could use this as an alternative and less verbose syntax:

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