Как заменить файлы с помощью webpack на уровне сборки?

Question

[bronse]

В моем проекте есть файл конфигурации, содержащий в себе различные настройки — токены, ссылки к API и т. д. Дело в том, что для development и production настройки сильно отличаются. И по этому я сделал 2 файла конфигурации.

project
|_configuration.js
|_configuration.dev.js

В коде я импортирую конфиги таким образом:

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

Я хочу чтобы webpack подхватывал `configuration.js` для production сборки, и `configuration.dev.js` для development.
Как лучше это сделать?

Answer 1

[sowner]

Можно использовать file-replace-laoder
https://www.npmjs.com/package/file-replace-loader

и прописать его в 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,
      }
    }]
  }
}