Estoy tratando de configurar el entorno para que cuando elijo ejecutar prod ejecute la configuración de prod y cuando elijo ejecutar dev, ejecute el servidor de desarrollo, actualmente mis scripts package.json se ven así:

  "scripts": {
    "build:dev": "cross-env NODE_ENV=developement webpack",
    "build:prod": "cross-env NODE_ENV=production webpack",
    "start:dev": "cross-env NODE_ENV=developement webpack-dev-server ",
    "start:prod": "cross-env NODE_ENV=production webpack-dev-server "
  },

Archivo de configuración del paquete web:

const webpack = require("webpack");
const path = require("path");
const dotenv = require("dotenv");

module.exports = {
  //Entry file for webpack.config
  entry: "./src/index.js",
  //Target specific use of project ie. nodejs project we use node value
  target: process.env.NODE_ENV === "dev" ? "node" : "web",
  //Dev server meant for hosting local server for developement
  devServer: {
    contentBase: path.resolve(__dirname, "public"),
    historyApiFallback: true,
    port: 8080,
  },
  //Modules are used to set rules to build specific file types
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/env", "@babel/react"],
              plugins: [
                "@babel/plugin-transform-runtime",
                "@babel/plugin-proposal-class-properties",
              ],
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          name: '[path][name].[ext]',
        },
      },
      {
        test: /\.(css|sass|scss)$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
              importLoaders: 2,
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true,
            },
          },
        ],
      },
      {
        test: /\.svg$/,
        use: [
          {
            loader: "svg-inline-loader",
            options: {
              limit: 10000,
            },
          },
        ],
      },
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  externals: {
    // require("jquery") is external and available
    //  on the global var jQuery
    "jquery": "jQuery"
  },
  //Changes how modues are resolved
  resolve: {
    extensions: ["*", ".js", ".jsx", ".ts", ".tsx"],
  },
  //Output is setup to serve the bundle.js file to be served to web browser
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "bundle.js",
    publicPath: "/",
  },
  //Prevent bundling of certain packages
  externals: {
    "react-native": true,
  },
  //A javascript object used to do various extra things for webpack
  plugins: [
    new webpack.DefinePlugin({
      "process.env": JSON.stringify(dotenv.config().parsed),
    }),
  ],
};

Y yo hago:

console.log(process.env.NODE_ENV)

Dentro de mi página de inicio jsx, pero cada vez que lo ejecuto incluso cuando hago arranque de hilo: prod it console.logs desarrollo y no producción, ¿por qué cross-env no cambia correctamente el NODE_ENV a producción cuando ejecuto esto?

0
laner107 22 ene. 2021 a las 15:05

1 respuesta

La mejor respuesta

Para copiar la variable env en webpack, debe usar webpack. DefinePlugin como lo hizo en su archivo de configuración, que parece que está tratando de copiar todas las cosas en el paquete web.

De todos modos, si desea usar el valor de cross-env, debería hacer lo mismo usando el complemento DefinePlugin pero ingrese el valor específico NODE_ENV de la siguiente manera:

webpack.config.js

{
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
  ],
}
0
tmhao2005 22 ene. 2021 a las 14:31