[解決済み] Cross-envでyarnの実行時にenv変数が変更されない。

質問

prod を実行するときは prod 設定を実行し、dev を実行するときは dev サーバを実行するように環境を設定しようとしていますが、現在私の package.json スクリプトは以下のようになっています。

  "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 "
  },

webpackの設定ファイルです。

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),
    }),
  ],
};

とかやってます。

console.log(process.env.NODE_ENV)

私のホームページのjsxの中にあるのですが、これを実行するたびに、yarn start:prodを実行しても、console.logsがproductionではなくdevelopmentになってしまうのですが、なぜこれを実行してもcrossenvがうまくNODE_ENVをproductionに変えてくれないのでしょうか。

解決方法は？

env変数を webpack を使用する必要があります。 webpack. DefinePlugin のように、設定ファイルに書かれているように、すべてのものをwebpackにコピーしようとしているように見えます。

とにかく、もし cross-env を使用すると、同じことをする必要があります。 DefinePlugin プラグインを使用しますが、特定の値を入力します。 NODE_ENV を以下のように設定します。

webpack.config.js

{
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    }),
  ],
}