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: stackoverflow.com/questions/27639005/… — Pavel Denisjuk
– Pavel Denisjuk, Commented Jul 23, 2017 at 16:42
Yeah, I actually went down that path without much luck. I updated my post to reflect that info. — d512
– d512, Commented Jul 23, 2017 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
– Esben, Commented Jul 23, 2017 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
– d512, Commented Jul 24, 2017 at 4:32

sancelot · Accepted Answer · 2017-08-02 23:08:55Z

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 2, 2017 at 23:08

sancelot

2,07414 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

d512 Over a year ago

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?

sancelot Over a year ago

I would need the complete webpack.config.js file

d512 Over a year ago

I went ahead and posted the entire webpack config file

sancelot Over a year ago

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 : webpack.github.io/docs/…

d512 Over a year ago

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: stackoverflow.com/questions/45759756/…

Vlad Dinulescu · Accepted Answer · 2018-01-26 06:34:11Z

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, 2018 at 6:34

Vlad Dinulescu

1,2311 gold badge15 silver badges25 bronze badges

1 Comment

Rvach.Flyver Over a year ago

Question was about handling config at runtime, your answer is about build time.

Collectives™ on Stack Overflow

Handling config files with webpack

Update 1:

Update 2:

2 Answers 2

5 Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update 1:

Update 2:

2 Answers 2

5 Comments

1 Comment

Linked

Related