Vue Cli 3 disabling code splitting - Can't get rid of the hash file

Question

I have a vue.config.js setup that works nicely and cancels the default code splitting.

But It's still outputs a CSS file with a hash identical to the CSS file with the nice name. I can write a script to delete it, but I wonder if there is a way to set the file to not output the CSS file with the hash.

vue.config.js:

const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  outputDir: "../assets/",
  configureWebpack: {
    plugins: [
      new MiniCssExtractPlugin({
        filename: "/css/sales-report.css"
      })
    ],
    output: {
      filename: "./js/sales-report.js"
    }
  },
  chainWebpack: config => {
    config.optimization.delete("splitChunks");
  }
}; 

The command line output looks like:

I would like to output only ../assets/js/sales-report.js and ../assets/css/sales-report.css, and I didn't find the correct setting to cancel the output of ../assets/css/app.fd4aa059.css.

If you want to test, this config will work any Vue CLI 3 project. What setting am I missing to cancel this file?

Answer 1

Vue CLI projects already use mini-css-extract-plugin, so inserting a new one in configureWebpack would result in duplicate CSS processing, as you discovered.

Instead, you could configure the existing plugin through css.extract in vue.config.js. It should look similar to this:

// vue.config.js
module.exports = {
  //...
  configureWebpack: {
    output: {
      filename: "./js/sales-report.js"
    }
  },
  chainWebpack: config => {
    config.optimization.delete("splitChunks");
  },
  css: {
    extract: {
      filename: "/css/sales-report.css"
    }
  }
}