.env 파일 변수를 웹 팩 구성에 전달하려면 어떻게 해야 합니까?

.env 파일 변수를 웹 팩 구성에 전달하려면 어떻게 해야 합니까?

저는 웹 팩을 처음 접하고 거의 모든 빌드 섹션을 해결했습니다만, 이제 문제는 환경 변수를 .env 파일에서 웹 팩 구성으로 전달하고 싶기 때문에 이 변수를 빌드 파일로 전달해야 한다는 것입니다.webpack.DefinePlugin플러그 인.

현재 웹 팩에서 빌드로 환경 변수를 직접 전달할 수 있습니다.아래 웹팩에서 사용한 코드를 봐주세요.

new webpack.DefinePlugin({
            "API_URL": JSON.stringify("http://my-api.com"),
            "FRONT_END_API_KEY" : "MYFRONTENDKEYGOESHERE"
        }),

나의package.json빌드 스크립트는

"scripts": {
    "start": "NODE_ENV=development webpack-dev-server --progress --port 8000 --content-base app/build/src"
    } 

이를 위해 dotenv 패키지를 사용할 수 있습니다.

npm install dotenv --save

패키지를 인스톨 한 후, 설정 상단에 다음과 같이 추가합니다.

const webpack = require('webpack'); // only add this if you don't have yet

// replace accordingly './.env' with the path of your .env file 
require('dotenv').config({ path: './.env' }); 

그리고 나서plugins섹션 추가:

new webpack.DefinePlugin({
  "process.env": JSON.stringify(process.env),
}),

webpack + dotenv

받아들여진 답변에서 영감을 얻긴 했지만, 나에게는 효과가 없다.아마도 dotenv의 API가 바뀐 것 같습니다.

아래가 좋습니다.

import dotenv from 'dotenv'
import { DefinePlugin } from 'webpack'


...

plugins: [
    new DefinePlugin({
      'process.env': JSON.stringify(dotenv.config().parsed)
    })
]

...

당신의 경우와 정확히 일치하지는 않지만, 저는 이 공식이 제게 가장 적합하다는 것을 알았습니다.

2개의 libs를 조합하여 사용합니다: dotenv는.env을 신청하다webpack.config.js (설정) 니즈 및 검증용 webpack-dotenv-dotenv-validation (기준).env.examplefile) 및 .env 파일에서 애플리케이션 코드로 모든 변수를 전달하려면 다음 절차를 수행합니다.

내 일부webpack.config.js:

// this is to load env vars for this config
require('dotenv').config({ // it puts the content to the "process.env" var. System vars are taking precedence
    path: '.env.webpack',
});
// and this to pass env vars to the JS application
const DotenvPlugin = require('webpack-dotenv-plugin');

[ plugins ]섹션:

plugins: [
    // ...
    new DotenvPlugin({ // makes vars available to the application js code
        path: '.env.webpack',
        sample: '.env.webpack.example',
        allowEmptyValues: true,
    }),
    // ...
]

제가 찾은 가장 간단한 솔루션은 npm 패키지를 사용하는 것입니다: dotenv-webpack

.env 파일을 만듭니다.

// .env
DB_HOST=127.0.0.1
DB_PASS=foobar
S3_API=mysecretkey

웹 팩 구성 파일에 추가

// webpack.config.js
const Dotenv = require('dotenv-webpack');

module.exports = {
...
plugins: [
new Dotenv()
]
...
};

코드로 사용

// file1.js
console.log(process.env.DB_HOST);
// '127.0.0.1'
Resulting bundle
// bundle.js
console.log('127.0.0.1');

저는 어떤 정보도 명확하게 말할 수 없기 때문에 답변에 대해 사과드립니다.

다음과 같은 작업을 할 수 있습니다.

var env = require('.env');

그리고나서

new webpack.DefinePlugin({
            "API_URL": JSON.stringify("http://my-api.com"),
            "SECRET_KEY" : "MYSECRETKEYGOESHERE",
            "env_property": env.property
        }),

하지만 저는 당신의 .env 파일과 이 답변에 대한 셋업 방법에 대해 추측하고 있습니다.

일단...

기밀을 각진 응용 프로그램에 전달하려고 하는 것 같습니다.

클라이언트측(브라우저) javascript에는 '비밀'이라는 것은 없습니다!!!

에 전달된 모든 것DefinePlugin최소한의 노력으로 추출할 수 있습니다.

이제 우리가 그걸 해결했으니까...

Webpack에는 Env 변수를 GlobalDefine 플러그인으로 전달하기 쉬운 환경 플러그인이 있습니다.문서에서:

new webpack.EnvironmentPlugin(['NODE_ENV', 'DEBUG']);

이는 다음 DefinePlugin 응용 프로그램과 동일합니다.

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

사용하시는 경우dotenv환경 변수를 관리하기 위해 dotenv webpack 플러그인을 사용할 수 있습니다.

코드 내에서 참조되는 변수만 포함되므로 암호를 참조하지 않는 한 해당 변수는 포함되지 않습니다.

웹 팩 문서에서:

webpack 명령줄 환경 옵션 --env를 사용하면 환경 변수를 원하는 만큼 전달할 수 있습니다.환경변수는 webpack.config.js에서 접근할 수 있게 됩니다.예를 들어 --env.production 또는 --env와 같이 입력합니다.NODE_ENV=local(NODE_ENV는 일반적으로 환경 유형을 정의하는 데 사용됩니다. 여기를 참조하십시오.)

안에서package.json

webpack --env.NODE_ENV=local --env.production --progress

안에서webpack.config.js

module.exports = env => {
  // Use env.<YOUR VARIABLE> here:
  console.log('NODE_ENV: ', env.NODE_ENV) // 'local'
  console.log('Production: ', env.production) // true

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }

언급URL : https://stackoverflow.com/questions/46224986/how-to-pass-env-file-variables-to-webpack-config