Geek Answers Handbook

Processing configuration files using webpack

I have an electronic application that I create using webpack 2. I have a configuration file that I include as a regular webpack resource:

config.js:

export default {
    config1: 1,
    config2: 2
}

main.js:

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

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

Update 1:

I thought file-loader might be the answer, but the problem is that the file loader replaces the statement requirewith the path to the file, not the contents of the file itself.

Update 2:

@sancelot webpack.

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'
}

config.bundle.js, main.bundle.js config.bundle.js. webpack:

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
    },
}
+6
2

-

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

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

+2

dotenv

( ) envify.

.

0

More articles:


All Articles