Vue CLI | vue.config.js, how to place assets in root dist?

Question

Normally, Vue CLI with vue.config.js places the .js and .css assets in /dist/[css|js]/. However, I want the .js and .css files in the root dist folder.

I can get the .js file in the root folder with the following config:

module.exports = {
  productionSourceMap: false,
  filenameHashing: false,
  configureWebpack: {
    optimization: {
      splitChunks: false
    }
  },
  chainWebpack: config => {
    config.externals({
      ...config.get("externals"),
      moment: "moment"
    });

    config.output.filename("[name].js");
  }
};

How do I do this with the .css file?

Answer 1

This can be accomplished with the following Vue CLI config (from vuejs/vue-cli#1967):

// vue.config.js
module.exports = {
  chainWebpack: (config) => {
    config.module
      .rule('images')
      .use('url-loader')
      .tap(options => Object.assign({}, options, { name: '[name].[ext]' }));
  },
  css: {
    extract: {
      filename: '[name].css',
      chunkFilename: '[name].css',
    },
  },
  configureWebpack: {
    output: {
      filename: '[name].js',
      chunkFilename: '[name].js',
    }
  }
}