Isolate specific config files from main bundle - reactjs

Question

I have a couple of config files in my application that a want in a separate bundle or not bundled at all but copied to the output folder and read by the main bundle somehow.
I've managed to get my files into a separate config bundle, but the problem is that these files are also still bundled into the main bundle, in effect rendering my config bundle useless.
I've managed to get the config bundle working with the help of #Chase, but I'm not happy yet. Next I want to know how to have these files not bundled at all, but still available to the main bundle after deployment.
ANY SUGGESTIONS?
My project folder/file structure (the essential bits):
- app
- js
- components
- [all of my components]
- config
- [my config files that I want to isolate]
- App.jsx
- index.jsx
- ...
- ...
My webpack config:
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const cwd = process.cwd()
const mode = 'production'
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
context: path.join(cwd, 'app'),
mode,
optimization: {
runtimeChunk: 'single',
minimize: false,
splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
config: {
test: /[\\/]app[\\/]js[\\/]config[\\/]/,
minSize: 0
},
vendors: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
// npm package names are URL-safe, but some servers don't like # symbols
return `npm.${packageName.replace('#', '')}`;
},
}
},
},
},
entry: {
app: ["babel-polyfill", './js/index.jsx'],
silentRenew: ["./silent_renew/silent_renew.js"],
},
output: {
path: path.resolve('dist'),
filename: 'bundle_[name].js'
},
module: {
rules: [{
test: /\.jsx?$/,
use: ['babel-loader'],
exclude: /node_modules/
},
{
test: /\.json$/,
use: ['json-loader'],
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'scss-loader'
]
},
{
test: /\.(png|jpg|jpeg|svg|gif)$/,
use: [
'file-loader'
]
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
'file-loader'
]
},
{
test: /\.(pptx|zip)$/,
loader: "file-loader",
options: {
name: '[name].[ext]'
}
}]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template: './index.ejs',
excludeChunks: ["silentRenew"],
}),
new HtmlWebpackPlugin({
template: "./silent_renew/silent_renew.html",
chunks: ["silentRenew",],
filename: "silent_renew.html"
}),
new webpack.DefinePlugin({
CONSTANTS: {
PROD: false,
TEST: true,
DEV: false
}
}),
new webpack.IgnorePlugin(/^(fs|ipc|ignore)$/)
]
}
I want my config files to go into the config bundle, this is already working.
But then I also need them to not be included in the main bundle.
Even better would be if I could have the config files not bundled at all and just copied to the output folder and read from there by the main (app) bundle. But an isolated config bundle is second option.

Answer 1

You need to chunk out your bundle based on conditions. This is an example of splitting out node_modules into a "common" bundle, but you can rewrite the test property to match your directory conditions.
optimization: {
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "common",
chunks: "all"
}
}
}