将dotenv-webpack与react项目一起使用时出错

问题描述

嗨，我正在尝试将dotenv-webpack与我的webpack配置文件一起使用，但似乎无法弄清楚如何处理以下错误...

.deFinitions is not a valid Plugin property
- Maybe you meant to use
"plugin": [
  ["@babel/plugin-transform-runtime",{
  "deFinitions": {
    "process.env.REACT_APP_WEATHERAPI": "\"XXXXXXX\""
  }
}]
]

我正在关注使用dotenv-webpack的文档。

Here is my webpack.config fileconst currentTask = process.env.npm_lifecycle_event;
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { postcss } = require("postcss-mixins");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const fse = require("fs-extra");
const webpack = require("webpack");
const dotenv = require("dotenv-webpack");

const postCssplugins = [
  require("postcss-import"),require("postcss-mixins"),require("postcss-simple-vars"),require("postcss-nested"),require("postcss-hexrgba"),require("autoprefixer")
];

class RunAfterCompile {
  apply(compiler) {
    compiler.hooks.done.tap("copy images",function () {
      fse.copySync("./app/assets/images","./docs/assets/images");
    });
  }
}

let cssConfig = {
  test: /\.css$/i,use: [
    "css-loader?url=false",{ loader: "postcss-loader",options: { plugins: postCssplugins } }
  ]
};

let pages = fse
  .readdirsync("./app")
  .filter(function (file) {
    return file.endsWith(".html");
  })
  .map(function (page) {
    return new HtmlWebpackPlugin({
      filename: page,template: `./app/${page}`
    });
  });

let config = {
  entry: "./app/assets/scripts/App.js",plugins: pages,module: {
    rules: [
      cssConfig,{
        test: /\.js$/,exclude: /(node_modules)/,use: {
          loader: "babel-loader",options: {
            presets: ["@babel/preset-react","@babel/preset-env"],plugins: ["@babel/plugin-transform-runtime",new dotenv()] <---- ERROR HERE!
          }
        }
      }
    ]
  }
};

if (currentTask == "dev") {
  cssConfig.use.unshift("style-loader");
  config.output = {
    filename: "bundled.js",path: path.resolve(__dirname,"app")
  };
  config.devServer = {
    before: function (app,server) {
      server._watch("./app/**/*.html");
    },contentBase: path.join(__dirname,"app"),hot: true,port: 3000,host: "0.0.0.0",historyApiFallback: { index: "/" }
  };
  config.mode = "development";
}

if (currentTask == "build") {
  cssConfig.use.unshift(MiniCssExtractPlugin.loader);
  postCssplugins.push(require("cssnano"));
  config.output = {
    filename: "[name].[chunkhash].js",chunkFilename: "[name].[chunkhash].js","docs")
  };
  config.mode = "production";
  config.optimization = {
    splitChunks: { chunks: "all" }
  };
  config.plugins.push(
    new CleanWebpackPlugin(),new MiniCssExtractPlugin({ filename: "styles.[chunkhash].css" }),new RunAfterCompile()
  );
}

module.exports = config;

解决方法

编辑：您的new dotenv()放在错误的插件数组中。 Docs.

它应该在全局插件中，而不在babel-loader中。由于您已经生成了HtmlWebpackPlugin数组，因此您必须将其添加到现有数组中

您的插件数组应为：

let config = {
  ...
  plugins: [
    ...pages,new dotenv()
  ]
  ...
};