0

我正在使用一个config-overrides.js看起来像这样的文件：

const path = require("path");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
  .BundleAnalyzerPlugin;
const webpack = require("webpack");

module.exports = function override(config, env) {
config.resolve.plugins.filter(i => !i.appSrcs);
  config.resolve.alias = {
    // adjust this path as needed depending on where your webpack config is
    "styled-components": path.resolve("./node_modules/styled-components"),
    react: path.resolve("./node_modules/react")
  };
  console.log(
    "REACT_APP_PUBLIC_URL_ASSETS= ",
    process.env.REACT_APP_PUBLIC_URL_ASSETS
  );

  config.module.rules.push({
    test: /\.(ts|tsx|js|jsx|mjs)$/,
    // include: /node_modules/,
    loader: "string-replace-loader",
    options: {
      search: "assets",
      replace: process.env.REACT_APP_PUBLIC_URL_ASSETS || "assets",
      flags: "gm"
    }
  });

  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    use: [
      {
        loader: require.resolve("awesome-typescript-loader")
      }
    ]
  });
  config.resolve.extensions.push(".ts", ".tsx");


  if (process.env.NODE_ENV === "production") {
    config.module.rules
      .find(i => i.oneOf)
      .oneOf.filter(i => i.options)
      .filter(i => i.options.name)
      .forEach(
        i =>
          (i.options.name = i.options.name
            .replace("static/media/", "")
            .replace(".[hash:8]", ""))
      );

    const css = config.plugins
      .filter(i => i.options)
      .find(i => i.options.chunkFilename);

    css.options.filename = "[name].[contenthash:8].css";
    css.options.chunkFilename = "[name].[contenthash:8].chunk.css";

    config.devtool = false;
    config.plugins.push(
      new webpack.SourceMapDevToolPlugin({
        publicPath: process.env.REACT_APP_SOURCEMAP_URL,
        filename: "[file].map"
      })
    );

    config.optimization = {
      ...config.optimization,
      runtimeChunk: "single",
      splitChunks: {
        maxInitialRequests: Infinity,
        minSize: 0,
        cacheGroups: {
          vendors: {
            test: /[\\/]node_modules[\\/](.*?)([\\/]|$)/,
            chunks: "all",
            name: "vendors",
            maxSize: 100000
          }
        }
      }
    };


    if (process.env.ANALYZER) {
      config.plugins.push(
        new BundleAnalyzerPlugin({
          defaultSizes: "parsed",
          generateStatsFile: true,
          analyzerMode: "static"
        })
      );
    }
  }

  return config;
};

重点是我需要添加 https://babeljs.io/docs/en/babel-plugin-transform-arrow-functions

@babel/plugin-transform-arrow-functions

但我不明白我应该在哪里加载那个插件。I have tried config.plugins.push(@babel/plugin-transform-arrow-functions)但它不会工作，所以我想知道如何使用 react-app-rewired 添加它。网站中提供的示例不包括 react-app-rewired 所以我不太确定

4

0 回答 0