【Vue.js】Vue CLI 3.0でハッシュ名を付けずにproductionビルドする

Vue CLI 3.0になってVue.jsもより開発しやすくなりましたね。
UIでビルドも楽になって手放せないのですが、
困ったのが production で生成されるチャンクハッシュ名付きファイル名です。
キャッシュされないようにつけるらしいですが、
複数のhtmlから起動させたい場合等、開発条件によっては困るし、
ソース中で、動的にパス名を参照するところはrequire()を付ける必要あるので
デバッグにいらぬ時間を浪費します。

そこで、vue.config.js にハッシュ名を付けないように設定しました。
使う際には、UIのOutput Directoryは空にしておいて下さい。

vue.config.js

const MiniCssExtractPlugin=require('mini-css-extract-plugin')

module.exports = {
  baseUrl: '',
  lintOnSave : true,
  productionSourceMap: process.env.NODE_ENV === 'production'? false :true,
  outputDir:process.env.NODE_ENV === 'production'? 'release' :'debug',
  pages:{
    index:{
      entry: './src/main.js',      //メインとなるJSファイル
      template: 'public/index.html',     //ソースとなるhtmlファイル名
      filename: 'app.html'      //出力するhtmlファイル名

    }
  },
  chainWebpack: config => {
      
    if (process.env.NODE_ENV === 'production'){

      //チャンクファイルを生成しないようにする
      config.optimization.delete('splitChunks')

      //メインJSファイル名にハッシュ値をつけない
      config.output
        .filename('[name].js')
       

      //imagesに置く画像ファイル名にハッシュ値をつけない
      config.module
        .rule('images')
        .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
        .use('url-loader')
        .loader('url-loader')
        .options({
          limit: 4096,
          name: 'img/[name].[ext]'
        })

      //svgのファイル名にハッシュ値をつけない
      config.module
        .rule('svg')
        .test(/\.(svg)(\?.*)?$/)
        .use('file-loader')
        .loader('file-loader')
        .options({
          name: 'img/[name].[ext]'
        })

      //mediaに置くメディアファイル名にハッシュ値をつけない
      config.module
        .rule('media')
        .test(/\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/)
        .use('url-loader')
        .loader('url-loader')
        .options({
          limit: 4096,
          name: 'media/[name].[ext]'
        })

      //fontsに置くフォントファイル名にハッシュ値をつけない
      config.module
        .rule('fonts')
        .test(/\.(woff2?|eot|ttf|otf)(\?.*)?$/)
        .use('url-loader')
        .loader('url-loader')
        .options({
          limit: 4096,
          name: 'fonts/[name].[ext]'
        })
            

            
      //CSSファイル名にハッシュ値をつけない
    config.plugin('extract-css')
        .use(MiniCssExtractPlugin, [{
          filename:'[name].css',
          chunkFilename:''
        }])

     //起動用htmlのminify設定を指定する
    config.plugin('html-index')
        .tap(args => {
          args[0].minify= {
            removeComments: false,
            collapseWhitespace: false,
            removeAttributeQuotes: false,
            collapseBooleanAttributes: false,
            removeScriptTypeAttributes: false
          };
          return args
        })



    }
  },
  configureWebpack:config => {
  }

}

そのうち、UIのオプションでチェックひとつでON/OFFできるようになるといいですね。