I have a .env
file that contains the NODE_ENV
variable. Per default, it is set to development
. When building the React app with webpack, I launch the command yarn build
:
"scripts": { "start": "NODE_ENV=development webpack serve --open --hot", "build": "NODE_ENV=production && webpack", }
The .env
file is:
NODE_ENV = "development"
But when logging the NODE_ENV
value in my webpack configuration file, I can see it is still in development
. The build is not minified either. But when I write production
in my .env
file, everything works fine.
The webpack configuration is:
/* eslint-env node */ const path = require("path"); const TerserPlugin = require("terser-webpack-plugin"); const Dotenv = require("dotenv-webpack"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); const isProductionMode = (mode) => mode === "production"; module.exports = () => { const env = require("dotenv").config({ path: __dirname + "/.env" }); const nodeEnv = env.parsed.NODE_ENV; console.log("🛎🛎🛎 isProduction", isProductionMode(nodeEnv)) // output: false return { mode: nodeEnv, entry: "./src/index.tsx", output: { path: path.join(__dirname, "./dist"), filename: "[name].[contenthash].bundle.js", publicPath: "/", clean: true, }, resolve: { extensions: [".ts", ".tsx", ".js", "jsx", ".json"], alias: { api: path.resolve(__dirname, "src/api/"), assets: path.resolve(__dirname, "src/assets/"), components: path.resolve(__dirname, "src/components/"), containers: path.resolve(__dirname, "src/containers/"), data: path.resolve(__dirname, "src/data/"), i18n: path.resolve(__dirname, "src/i18n/"), models: path.resolve(__dirname, "src/models/"), pages: path.resolve(__dirname, "src/pages/"), routes: path.resolve(__dirname, "src/routes/"), src: path.resolve(__dirname, "src/"), stores: path.resolve(__dirname, "src/stores/"), utils: path.resolve(__dirname, "src/utils/"), }, }, module: { rules: [ { test: /\.(ts|js)x?$/, exclude: /node_modules/, use: { loader: "babel-loader" }, }, { test: /\.css$/, use: ["style-loader", "css-loader"] }, { test: /\.(png|jpg|jpeg|woff2)$/, use: ["file-loader"] }, { test: /\.svg$/, use: [ { loader: "babel-loader" }, { loader: "react-svg-loader", options: { jsx: true, }, }, ], }, ], }, devServer: { historyApiFallback: true, port: 3000, inline: true, hot: true, }, plugins: [ new HtmlWebpackPlugin({ template: "./src/index.html", favicon: "./src/assets/images/favicon.png", }), new Dotenv(), ], optimization: { minimize: isProductionMode(nodeEnv), minimizer: isProductionMode(nodeEnv) ? [new TerserPlugin(), new CssMinimizerPlugin()] : [], splitChunks: { chunks: "all", }, }, }; };
The question is thus: how to make sure I can change my NODE_ENV
when launching the build?
Also, what is the command I should write in my package.json to launch the build once the dist folder is uploaded to Netlify or similar hosting platform?
Thanks!
https://stackoverflow.com/questions/67440037/how-to-change-node-env-when-building-app-with-webpack May 08, 2021 at 02:28AM
没有评论:
发表评论