Creating a single js file build

Version

3.0.0-beta.2

Reproduction link

https://jsfiddle.net/b1jn7rv6/

Steps to reproduce

With vue-cli v2.9.3 I created a single js file build with uncommenting all the new webpack.optimize.CommonsChunkPlugin functions in ./build/webpack.prod.conf.js file.

How I can achieve the same with vue-cli v3? I tried this config, but doesn’t work:

// vue.config.js
module.exports = {
  lintOnSave: true,
  chainWebpack: (config) => {
    config
      .plugin('split-vendor')
      .clear();
  },
  productionSourceMap: false,
};

What is expected?

Creating a single js file build.

What is actually happening?

Error is returned, build not created:

$ npm run build

> vue-test-package@0.1.0 build D:\www\node\vue-cli\vue-test-package
> vue-cli-service build


-  Building for production...D:\www\node\vue-cli\vue-test-package\node_modules\webpack-chain\src\Plugin.js:38
    return init(this.get('plugin'), this.get('args'));
           ^

TypeError: init is not a function
    at Object.toConfig (D:\www\node\vue-cli\vue-test-package\node_modules\webpack-chain\src\Plugin.js:38:12)
    at clean.Object.assign.plugins.plugins.values.map.plugin (D:\www\node\vue-cli\vue-test-package\node_modules\webpack-chain\src\Config.js:69:59)
    at Array.map (<anonymous>)
    at module.exports.toConfig (D:\www\node\vue-cli\vue-test-package\node_modules\webpack-chain\src\Config.js:69:38)
    at Service.resolveWebpackConfig (D:\www\node\vue-cli\vue-test-package\node_modules\@vue\cli-service\lib\Service.js:142:34)
    at PluginAPI.resolveWebpackConfig (D:\www\node\vue-cli\vue-test-package\node_modules\@vue\cli-service\lib\PluginAPI.js:119:25)
    at api.registerCommand.args (D:\www\node\vue-cli\vue-test-package\node_modules\@vue\cli-service\lib\commands\build\index.js:86:27)
    at Service.run (D:\www\node\vue-cli\vue-test-package\node_modules\@vue\cli-service\lib\Service.js:130:28)
    at Object.<anonymous> (D:\www\node\vue-cli\vue-test-package\node_modules\@vue\cli-service\bin\vue-cli-service.js:22:9)
    at Module._compile (module.js:662:30)
    at Object.Module._extensions..js (module.js:673:10)
    at Module.load (module.js:575:32)
    at tryModuleLoad (module.js:515:12)
    at Function.Module._load (module.js:507:3)
    at Function.Module.runMain (module.js:703:10)
    at startup (bootstrap_node.js:193:16)

[diogosalazar]

@rowej83

I think setting the splitChunks option in webpack to false should take care of that:

// vue.config.js
module.exports = {
  configureWebpack: {
    // No need for splitting
    optimization: {
      splitChunks: false
    }
  }
}

[rowej83]

Can we get a clear example of what a vue.config.js would consists of to build to a single js file? I know it’s better for caching reasons but I know I’m not the only one who would like to know this.