Vue-cli: Generate a unique css and js file

[chiqui3d]

What problem does this feature solve?

To be able to configure from vue.config.js or from vui ui, the option to have only one file for css y js , that the only way I see now it is that it generates multiple files or injecting.

What does the proposed API look like?

I would put the option in the vue.config.js the single option in css and js

module.exports = {
    productionSourceMap: false,
    baseUrl: './',
    outputDir: undefined,
    assetsDir: undefined,
    runtimeCompiler: undefined,
    parallel: undefined,
    css: {
        modules: false,
        .....single: true
    },
    js: {
       .....single: true

    },
    configureWebpack: {
        performance: {
            hints: false
        }
    }

}

[LinusBorg]

I'm not sure that I understand your request. What I understand so far is:

1. You only want one .js file

module.exports = {
  chainWebpack: config =>  {
    // turn of code splitting.
    config.optimization.splitChunks(false)
  },
}

I don' think we generate multiple css files explicitly, so not sure what to tell you about that.

[chiqui3d]

Thank you very much @LinusBorg , for javascript is what I needed. But for css, the npm run build command generates a css file for each view with css.
Example:
app.css
about.css
....

I only want one css and I don't want it to depend on javascript.
Is it possible to do this?

[chiqui3d]

@LinusBorg Can't I do that?

[LinusBorg]

You can, I think. This should work:

chainWebpack: config => {
  config.plugin('extract-css').tap(([options]) => {
    options.filename = 'css/app.[contenthash:8].css'
  })
}

[chiqui3d]

Not work, this is my vue.config.js

const prodMode = process.env.NODE_ENV === 'production'

module.exports = {
    productionSourceMap: false,
    baseUrl: undefined,
    outputDir: undefined,
    assetsDir: undefined,
    runtimeCompiler: undefined,
    parallel: undefined,
    css: {
        extract: true
    },
    chainWebpack: config => {
        config.plugin('extract-css').tap(([options]) => {
            console.log(options);
            options.filename = 'css/app.[contenthash:8].css';
        });

        config.optimization.splitChunks(false)
        config.plugins.delete('preload')
        config.plugins.delete('prefetch')

    },
    configureWebpack: {
        output: {
            filename: "js/[name].js",
            chunkFilename: "js/[name].js"
        }
    },
}

And this is what generates

Thanks @LinusBorg

[chiqui3d]

I also realized that by doing it with vue ui the app.js file is smaller, while the terminal generates a bigger one, this without changing anything of the configuration.

[yyx990803]

This has nothing to do with configurations... you are likely using the router, which comes with a default route config which imports the about page as an async component. Read router.js please. If you don't want to split that component, just use normal imports instead of dynamic import.

This is why you should always include your actual code when reporting a bug.

[chiqui3d]

Yes you're right, that was the problem. I was making it difficult for myself.

Thank you both and my apologies.