[javascript] Webpack을 사용하는 환경 기반 조건부 빌드

나는 Matt Derrick ‘Answer 와 비슷한 것을 사용 했지만 두 가지 점에 대해 걱정했습니다.

1. 전체 구성은 내가 사용할 때마다 주입됩니다 ENV(대규모 구성에는 좋지 않음).
2. require(env)다른 파일을 가리 키기 때문에 여러 진입 점을 정의해야 합니다.

---

내가 생각 해낸 것은 구성 개체를 만들고 구성 모듈에 주입하는 간단한 작곡가입니다.
파일 구조는 다음과 같습니다.

config/
 └── main.js
 └── dev.js
 └── production.js
src/
 └── app.js
 └── config.js
 └── ...
webpack.config.js

는 main.js모든 기본 설정 물건을 원하는 분야

// main.js
const mainConfig = {
  apiEndPoint: 'https://api.example.com',
  ...
}

module.exports = mainConfig;

dev.js및 production.js주요 설정을 무시에만 홀드 설정 물건 :

// dev.js
const devConfig = {
  apiEndPoint: 'http://localhost:4000'
}

module.exports = devConfig;

중요한 부분은 webpack.config.js구성을 구성하고 DefinePlugin 을 사용 __APP_CONFIG__하여 구성된 구성 개체를 보유 하는 환경 변수를 생성하는 것입니다 .

const argv = require('yargs').argv;
const _ = require('lodash');
const webpack = require('webpack');

// Import all app configs
const appConfig = require('./config/main');
const appConfigDev = require('./config/dev');
const appConfigProduction = require('./config/production');

const ENV = argv.env || 'dev';

function composeConfig(env) {
  if (env === 'dev') {
    return _.merge({}, appConfig, appConfigDev);
  }

  if (env === 'production') {
    return _.merge({}, appConfig, appConfigProduction);
  }
}

// Webpack config object
module.exports = {
  entry: './src/app.js',
  ...
  plugins: [
    new webpack.DefinePlugin({
      __APP_CONFIG__: JSON.stringify(composeConfig(ENV))
    })
  ]
};

마지막 단계는 이제 config.js이며 다음과 같습니다 (webpack 아래에 있으므로 여기에서 es6 가져 오기 내보내기 구문 사용).

const config = __APP_CONFIG__;

export default config;

당신에 app.js당신은 지금 사용할 수 import config from './config';는 config 객체를 얻을 수 있습니다.