[javascript] 웹팩에서 환경 종속 변수 전달

각도 앱을 gulp에서 webpack으로 변환하려고합니다. gulp에서 나는 gulp-preprocess를 사용하여 NODE_ENV에 따라 html 페이지의 일부 변수 (예 : 데이터베이스 이름)를 바꿉니다. 웹팩으로 비슷한 결과를 얻는 가장 좋은 방법은 무엇입니까?

답변

이를 달성하기위한 두 가지 기본 방법이 있습니다.

DefinePlugin

new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
}),

이는 “있는 그대로”일치하는 항목 만 대체합니다. 그렇기 때문에 문자열이 형식으로되어 있습니다. 객체와 같은 더 복잡한 구조를 가질 수 있지만 아이디어를 얻습니다.

EnvironmentPlugin

new webpack.EnvironmentPlugin(['NODE_ENV'])

EnvironmentPluginDefinePlugin내부적으로 사용 하고 환경 값을 코드로 매핑합니다. 터서 구문.

별명

또는 별명 모듈을 통해 구성을 사용할 수 있습니다 . 소비자 측면에서 보면 다음과 같습니다.

var config = require('config');

구성 자체는 다음과 같습니다.

resolve: {
    alias: {
        config: path.join(__dirname, 'config', process.env.NODE_ENV)
    }
}

하자 말은 process.env.NODE_ENV있다 development. ./config/development.js그때에 매핑됩니다 . 맵핑 된 모듈은 다음과 같이 구성을 내보낼 수 있습니다.

module.exports = {
    testing: 'something',
    ...
};

답변

CLI 인터페이스 만 사용하려면 definewebpack 옵션을 사용하십시오 . 내 스크립트에 다음 스크립트를 추가합니다 package.json.

"build-production": "webpack -p --define process.env.NODE_ENV='\"production\"' --progress --colors"

그래서 난 그냥 실행해야합니다 npm run build-production.

답변

환경 특정 변수를 설정하는 방법에 대한 몇 가지 옵션을 조사한 결과 다음과 같습니다.

현재 2 개의 웹 팩 구성이 있습니다.

webpack.production.config.js

new webpack.DefinePlugin({
  'process.env':{
    'NODE_ENV': JSON.stringify('production'),
    'API_URL': JSON.stringify('http://localhost:8080/bands')
  }
}),

webpack.config.js

new webpack.DefinePlugin({
  'process.env':{
    'NODE_ENV': JSON.stringify('development'),
    'API_URL': JSON.stringify('http://10.10.10.10:8080/bands')
  }
}),

내 코드에서는 다음과 같은 간단한 방법으로 API_URL 값을 얻습니다.

const apiUrl = process.env.API_URL;

2016 년 11 월 3 일 수정

Webpack 문서에는 https://webpack.js.org/plugins/define-plugin/#usage가 있습니다.

new webpack.DefinePlugin({
    PRODUCTION: JSON.stringify(true),
    VERSION: JSON.stringify("5fa3b9"),
    BROWSER_SUPPORTS_HTML5: true,
    TWO: "1+1",
    "typeof window": JSON.stringify("object")
})

ESLint 를 사용하면 no-undef규칙 이있는 경우 코드에 정의되지 않은 변수를 구체적으로 허용해야합니다 . 다음 과 같이 http://eslint.org/docs/rules/no-undef :

/*global TWO*/
console.log('Running App version ' + TWO);

2017 년 9 월 7 일 수정 (Create-React-App 전용)

너무 많이 구성하지 않은 경우 Create-React-App : Create-React-App-사용자 정의 환경 변수 추가를 확인하십시오 . CRA는 Webpack을 사용합니다.

답변

당신은 통과 할 수 있는 명령 줄 인수 추가 플러그인없이 사용 --env웹팩 2 이후를 :

webpack --config webpack.config.js --env.foo=bar

webpack.config.js에서 변수 사용 :

module.exports = function(env) {
    if (env.foo === 'bar') {
        // do something
    }
}

출처

답변

변환을 수행하는 동안 사용 EnvironmentPlugin가능한 기능을 직접 사용하여 webpack환경 변수에 액세스 할 수 있습니다.

webpack.config.js파일에 플러그인을 선언하면 됩니다.

var webpack = require('webpack');

module.exports = {
    /* ... */
    plugins = [
        new webpack.EnvironmentPlugin(['NODE_ENV'])
    ]
};

사용하려는 환경 변수의 이름을 명시 적으로 선언해야합니다.

답변

개인적으로 많은 답변을 추가하려면 다음을 선호합니다.

const webpack = require('webpack');
const prod = process.argv.indexOf('-p') !== -1;

module.exports = {
  ...
  plugins: [
    new webpack.DefinePlugin({
      process: {
        env: {
          NODE_ENV: prod? `"production"`: '"development"'
        }
      }
    }),
    ...
  ]
};

이것을 사용하면 펑키 env 변수 또는 크로스 플랫폼 문제가 없습니다 (env vars 포함). 당신이 할 일은 각각 정상 webpack또는 webpack -p개발 또는 생산을 실행하는 것 입니다.

참조 : Github 문제

답변

전도인 이 작성한 위의 게시물 에 대한 나의 편집 은 승인되지 않았으므로 , 추가 정보를 게시합니다.

정의 된 버전 번호 와 같이 package.json 에서 값을 선택하고 Javascript 내의 DefinePlugin 을 통해 액세스 하려는 경우 .

{"version": "0.0.1"}

그런 다음 각각의 webpack.config 내에서 package.json을 가져오고 import 변수를 사용하여 속성에 액세스 한 다음 DefinePlugin 의 속성을 사용하십시오 .

const PACKAGE = require('../package.json');
const _version = PACKAGE.version;//Picks the version number from package.json

예를 들어 webpack.config의 특정 구성은 DefinePlugin 에 METADATA를 사용하고 있습니다.

const METADATA = webpackMerge(commonConfig({env: ENV}).metadata, {
  host: HOST,
  port: PORT,
  ENV: ENV,
  HMR: HMR,
  RELEASE_VERSION:_version//Version attribute retrieved from package.json
});

new DefinePlugin({
        'ENV': JSON.stringify(METADATA.ENV),
        'HMR': METADATA.HMR,
        'process.env': {
          'ENV': JSON.stringify(METADATA.ENV),
          'NODE_ENV': JSON.stringify(METADATA.ENV),
          'HMR': METADATA.HMR,
          'VERSION': JSON.stringify(METADATA.RELEASE_VERSION)//Setting it for the Scripts usage.
        }
      }),

모든 타입 스크립트 파일 내에서 액세스하십시오 :

this.versionNumber = process.env.VERSION;

가장 똑똑한 방법은 다음과 같습니다.

// webpack.config.js
plugins: [
    new webpack.DefinePlugin({
      VERSION: JSON.stringify(require("./package.json").version)
    })
  ]

Ross Allen에게 감사합니다