extract-text-webpack-plugin replacement for non CSS files?

[briandipalma]

Asking here as the extract-text-webpack-plugin repo is archived. We used extract-text-webpack-plugin to bundle our *.properties i18n files into one file that allowed our clients to see all the translation strings in our apps in one file, we'd process/parse the files with our own loader so the files could be handled in a JS engine.

I'm at a loss as to what I'm meant to use to achieve the same effect in Webpack 5? Asset modules won't cut it as the files need to be parsed/modified by our loader or else we'll have JS errors and we want to bundle them all into one file.

This file shows how we'd use it: https://github.com/caplin/caplin-dev-tools/blob/master/webpack-config-app/i18n.js

   const i18nExtractTextPlugin = new ExtractTextPlugin({
      allChunks: true,
      filename: i18nFileName
    });
    const i18nExtractingLoader = i18nExtractTextPlugin.extract([
      "raw-loader",
      "@caplin/i18n-loader"
    ]);

    i18nModulesRule.use = i18nExtractingLoader;
    webpackConfig.plugins.push(i18nExtractTextPlugin);

[alexander-akait]

You need custom loader/plugin for this right now, unfortunately extracting attached to what you work with, for example for CSS we need fix modules order (therefore it’s luck that everything worked before without any problems), for HTML it is other process, for other resources it can be other. Perhaps you don't need extract. If you provide more information about your loader I will help.

[briandipalma]

We have our own loader https://github.com/caplin/caplin-dev-tools/blob/master/i18n-loader/index.js it would parse the *.properties files and return a JS object. We'd raw load the files, parse them in our loader and then bundle them all into a single "en.js", "de.js" etc file using the extract text plugin. Basically I'm wondering how to

1. Chain my own loader onto the output of an asset module.
2. Bundle all the outputs into a single file on disk.

[alexander-akait]

hm, why do not use https://webpack.js.org/plugins/split-chunks-plugin/ and split modules to own chunks (i.e. en.js/de.js/etc) using test (https://webpack.js.org/plugins/split-chunks-plugin/#splitchunkscachegroupscachegrouptest)? Should works fine without any extra loaders/plugins