Sé que hay mucha documentación en línea y varias preguntas relacionadas con esto, pero nada parece funcionar.
Tengo un proyecto simple de Vanilla JS, incluido con un paquete web.
Este es mi archivo webpack.dev.js :
const path = require('path'); const webpack = require('webpack'); module.exports = { mode: 'development', devtool: 'eval-source-map', output: { path: path.resolve('public'), filename: 'dist/bundle.js', }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', ], }, { test: /\.svg$/, use: 'file-loader', }, ], }, plugins: [ new webpack.EnvironmentPlugin(['CUSTOM_PATH']), ], devServer: { static: './public', }, }; Este es mi archivo .env :
CUSTOM_PATH=https://test.s3.us-west-2.amazonaws.com/test/dev/ Y finalmente este es el script en mi package.json
"start": "export $(xargs < ../.env) && webpack serve --open --config webpack.dev.js", Cuando inicio el proyecto, aparece un error que dice que process no está definido al intentar hacer un simple console.log(process.env.CUSTOM_PATH)
Uncaught (in promise) ReferenceError: process is not defined
Esto se ejecutará en el navegador, no en un servidor de nodo.
¿Qué falta? ¿Cómo puedo construir con una variable de entorno?
Terminé actualizando mi webpack.dev.js a
const path = require('path'); const webpack = require('webpack'); module.exports = { mode: 'development', devtool: 'eval-source-map', output: { path: path.resolve('public'), filename: 'dist/bundle.js', }, module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader', ], }, { test: /\.svg$/, use: 'file-loader', }, ], }, plugins: [ new webpack.DefinePlugin({ 'process.env': { CUSTOM_PATH: JSON.stringify(process.env.CUSTOM_PATH) } }), ], devServer: { static: './public', }, }; Sin JSON.stringify no funciona por alguna razón, incluso si ya es una cadena.