Handling config files with webpack

Question

I have an electron app that I'm building with webpack 2. I have a config file that I'm including like a normal webpack resource:

config.js:

export default {
    config1: 1,
    config2: 2
}

main.js:

import config from '../some/path/config';
console.log(config.config1);

The config file code ends up in my bundle.js file as you would expect. The problem is that the point of config files is that you can change them after deployment. This set up requires me to re-webpackify everything if I want config file changes to take effect.

Update 1:

I thought file-loader might be the answer but the problem is that file loader replaces require statement with a path to a file, not the file content itself.

Update 2:

At the suggestion of @sancelot, I tried making it a separate entry point and output in my webpack config file.

entry: {
    main: ['babel-polyfill', path.join(__dirname, '../app/main.js')],
    config: [path.join(__dirname, '../app/config.js')]
},

output: {
    path: `${__dirname}/../build/`,
    publicPath: `${__dirname}/../build/`,
    filename: '../build/[name].bundle.js'
}

which did create a separate config.bundle.js file but main.bundle.js still contained its own copy of the config file internally and basically ignored config.bundle.js. For the sake of completeness, I here is the entire webpack config file:

import webpack from 'webpack';
import path from 'path';


export default {
    devtool: 'source-map',

    target: 'electron-main',

    entry: {
        main: ['babel-polyfill', path.join(__dirname, '../app/main.js')],
        config: [path.join(__dirname, '../app/config.js')]
    },

    output: {
        path: `${__dirname}/../build/`,
        publicPath: `${__dirname}/../build/`,
        filename: '../build/[name].bundle.js'
    },

    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        cacheDirectory: true
                    }
                }
            },
            {
                test: /index.html/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: 'index.html'
                    }
                }
            }
        ]
    },

    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production'),
            'process.env.devMode': process.env.NODE_ENV === 'development',
            'process.env.prodMode': process.env.NODE_ENV === 'production',
            'process.env.DEBUG_PROD': JSON.stringify(process.env.DEBUG_PROD || 'false')
        })
    ],

    node: {
        __dirname: false,
        __filename: false
    },
}

I think this should help you: https://stackoverflow.com/questions/27639005/how-to-copy-static-files-to-build-directory-with-webpack — Pavel Denisjuk, Jul 23 '17 at 16:42
Yeah, I actually went down that path without much luck. I updated my post to reflect that info. — d512, Jul 23 '17 at 19:44
What do you mean by changing after deployment? Do you mean that the config files should have deployment-specific values? Like API secrets and so? If so, checkout `dotenv` — Esben, Jul 23 '17 at 21:11
@Esben, for example, let's say the config file contains the logging level (debug, info, warn, or error). At some point after deployment to production I want to change the logging level from debug to warn. I can't do that without recompiling. I guess environment variables are an option, but I feel like config files are easier to work with. — d512, Jul 24 '17 at 04:32

score 2 · Answer 1 · answered Aug 02 '17 at 23:08

2

you have to add an entry in your webpack config

{
  entry: {
    app: './src/app.js',
    config: './src/config.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
 }

https://webpack.js.org/concepts/output/

answered Aug 02 '17 at 23:08

sancelot

1,905
12
31

1

I tried that and it does create a separate config file, but it's also still adding the config data directly into my `bundle.js` and that's the config data it's using at run time. How do you tell it to grab the config data from the separate `config.js` file? – d512 Aug 03 '17 at 14:51
I would need the complete webpack.config.js file – sancelot Aug 03 '17 at 20:12
I went ahead and posted the entire webpack config file – d512 Aug 09 '17 at 15:49
I have had a look and finally found it was better to use code splitting , I think this is what you need . read this please : https://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code – sancelot Aug 09 '17 at 19:55
I think your suggestion is correct, thank you. However there appears to be some kind of issue between the `electron` main process and `CommonsChunkPlugin` that prevents the app from working. I created another post about this: https://stackoverflow.com/questions/45759756/commonschunkplugin-doesnt-work-with-electron – d512 Aug 19 '17 at 14:22

score 0 · Answer 2 · answered Jan 26 '18 at 06:34

0

For this case, I'd suggest dotenv

For client-side applications (that run in browsers), I'd suggest envify.

Both suggestions have easy to follow setup guides.

answered Jan 26 '18 at 06:34

Vlad Dinulescu

1,173
1
14
24

Question was about handling config at runtime, your answer is about build time. – Rvach.Flyver Oct 16 '21 at 17:56

Handling config files with webpack

Update 1:

Update 2:

2 Answers2

Linked