Vue-cli: Creating a single js file build

[DJviolin]

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

> [email protected] 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)

[yyx990803]

What's your use case for this? In most cases the default will result in better caching. A single file is not always better.

Anyway the syntax should be config.plugins.delete(name) (see https://github.com/mozilla-neutrino/webpack-chain)

[DJviolin]

Thank You, it worked!

[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.

[diogosalazar]

@rowej83

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

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

[DanielPe05]

For sure this is a use case, I have many apps that are simple widgets that get embedded into larger SSR applications, and being able to reference a single file for the single widget where it belongs and new-ing it up there is very valuable. I'm not sure there is a target build for such cases so we are using the app one which does the job (I had to include the vue runtime so lib was not an option) although we have no need for the index.html we just care about referencing the entry point to the widget (async code splitting is used for them also). Another thing I noticed was that the entry point also receives a hash so I needed to copy app.*.js into app.js after every build so I could reference it that way. Maybe there is room for supporting this kind of widget like app in the build. But the above worked. @LinusBorg @yyx990803 What do you guys think of this?

[LinusBorg]

I'm not sure what your requirement is, as the original request of this issue was answered.

Maybe you should write down a more detailed explanation of what you are missing about the options provided by build.

As far as the hashes are concerned: have a look at the docs, there's a configuration to disable them.