2021年5月7日星期五

How to change NODE_ENV when building app with webpack?

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 .envfile is:

NODE_ENV = "development"

But when logging the NODE_ENVvalue 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

没有评论:

发表评论