Webpack how to cache bust angular-translate with $translatePartialLoader?

Question

"webpack": "^2.7.0"

I'm trying to add a hash to our translation files in order to cache bust when deploying. I've managed to extract the json and add a hash and output it to a folder and is good with the world.

But, my unhashed json is still under there original folders after building. I understand that we don't need to add a loader for json as it already has means of handling importing, so my question would be how do I clean out the json that's already been processed?

my folder structure is as follows

src/
   app/
     module-name/
        /translations
         en.json
         fn.json
     module-name/
        /translations
         en.json
         fn.json
     //ect...

I used the CopyWebpackPlugin to get the json and hash is there maybe an option ive missed that cleans out the process'd files? or maybe i'm approaching this the incorrect way.

const webpack = require('webpack');
const conf = require('./gulp.conf');
const path = require('path');

const VersionFile = require('webpack-version-file');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const pkg = require('../package.json');
const autoprefixer = require('autoprefixer');

module.exports = {
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'eslint-loader',
        enforce: 'pre'
      },
      {
        test: /\.(css|scss)$/,
        loaders: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?minimize!resolve-url-loader!sass-loader?sourceMap!postcss-loader'
        })
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        loader: 'file-loader',
        options: {
          regExp: /\/([a-z0-9]+)\/[a-z0-9]+\.json$/,
          name: '[name]-[hash].[ext]'
        }
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: [
          'ng-annotate-loader',
          'babel-loader'
        ]
      },
      {
        test: /\.html$/,
        loaders: [
          'html-loader'
        ]
      }
    ]
  },
  plugins: [
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin({
      template: conf.path.src('index.html')
    }),
    new webpack.optimize.UglifyJsPlugin({
      output: {comments: false},
      compress: {unused: true, dead_code: true, warnings: false} // eslint-disable-line camelcase
    }),
    new ExtractTextPlugin('index-[contenthash].css'),
    new webpack.optimize.CommonsChunkPlugin({name: 'vendor'}),
    new webpack.LoaderOptionsPlugin({
      options: {
        postcss: () => [autoprefixer]
      }
    }),
    new webpack.HashedModuleIdsPlugin(),
    new CopyWebpackPlugin([{
      from: 'src/app/**/*.json',
      to: 'translations/[name]-[hash].[ext]'
    }]),
    new VersionFile({
      output: `${conf.paths.dist}/version.txt`,
      verbose: true
    })
  ],
  output: {
    path: path.join(process.cwd(), conf.paths.dist),
    filename: '[name]-[hash].js'
  },
  entry: {
    app: [`./${conf.path.src('app/app.module.js')}`],
    vendor: Object.keys(pkg.dependencies)
  },
  node: {
    fs: 'empty',
    /* eslint-disable camelcase */
    child_process: 'empty'
  }
};

Or to similfy the question, how can i add a hash to json files? and the following code doesn't seem to do anything.

   {
       test: /\.json$/,
       loader: 'file-loader',
       options: {
         name: '[name]-[hash].[ext]'
       }
   }

EDIT:

so it seems like my json loader doesnt pick up the translation files as they're dynamicly imported like so how:

  $translateProvider.useLoader('$translatePartialLoader', {
    urlTemplate: 'app/{part}/translations/{lang}.json'
  });

do you handle cases like this?

Answer 1

The main goal you're trying to do here is telling the browser its a new file when releasing a new version and we can do this fairly easily without having to force webpack to know what files are being used.

in your webpack config add this

const pkg = require('../package.json');
//...
new webpack.DefinePlugin({
  __VERSION__: JSON.stringify(pkg.version)
})

and where you add your translation files this allows for the browser to know where has been a new release and should update translation files.

$translateProvider.useLoader('$translatePartialLoader', {
   urlTemplate: `app/{part}/translations/{lang}.json?v=${__VERSION__}`
});