I am new to webpack and worked out almost all build sections, but now the problem is that I want to pass the environment variables from a .env file to webpack config, so that I can pass that variables to my build files via webpack.DefinePlugin
plugin.
Currently I am able to to pass environment variable directly from webpack to to my build. Please see the code below which I used in webpack.
new webpack.DefinePlugin({
"API_URL": JSON.stringify("http://my-api.com"),
"FRONT_END_API_KEY" : "MYFRONTENDKEYGOESHERE"
}),
My package.json
build script is
"scripts": {
"start": "NODE_ENV=development webpack-dev-server --progress --port 8000 --content-base app/build/src"
}
You can use dotenv package for this purpose.
npm install dotenv --save
After installing the package, add this in the top of your config:
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' });
then in plugins
section, add this:
new webpack.DefinePlugin({
"process.env": JSON.stringify(process.env),
}),