How to replace files with webpack at build level?

Question

webpack

My project has a configuration file that contains various settings - tokens, API links, etc. The thing is that the settings for development and production are very different. And for this I made 2 configuration files.
project
|_configuration.js
|_configuration.dev.js
In the code, I import configs like this:

import * as configuration from './configuration.js';

I want webpack to pick up `configuration.js` for production builds, and `configuration.dev.js` for development.
What is the best way to do this?

Answer 1

You can use file-replace-laoder
https://www.npmjs.com/package/file-replace-loader
and add it to webpack config

//webpack.config.js
 
const resolve = require('path').resolve;
 
module.exports = {
  //...
  module: {
    rules: [{
      test: /\.configuration\.js$/,
      loader: 'file-replace-loader',
      options: {
        condition: process.env.NODE_ENV === 'development',
        replacement: resolve('./configuration.dev.js'),
        async: true,
      }
    }]
  }
}