How to use react-app-rewired - 10 common examples

// Replace the babel-preset-react-app preset with the preset rewire from this
  // package. This is done so @babel/preset-flow can be removed.
  // const babelLoader = getBabelLoader(config.module.rules) as webpack.NewLoader;
  const babelLoader = getLoader(
    scriptLoader.use as webpack.RuleSetRule[],
    babelLoaderMatcher
  ) as webpack.NewLoader;
  if (!babelLoader || !babelLoader.options)
    throw new Error("Unable to locate Babel loader.");
  babelLoader.options.presets = [path.resolve(__dirname, "rewirePreset")];

  // Older versions of react-scripts v2 use a Webpack loader to add support for
  // SVGs as React components. Later versions do this using a Babel plugin.
  // Check if it is present. If it is, replace the preset in the SVG loader's
  // sibling Babel loader.
  const svgLoader = getLoader(config.module.rules, svgLoaderMatcher);
  if (svgLoader) {
    if (!("use" in svgLoader) || !Array.isArray(svgLoader.use))
      throw new Error("Unexpected layout for SVG loader.");
    const svgBabelLoader = svgLoader.use.find((l: any) =>
      /babel-loader/.test(l.loader)
    );
    if (
      !svgBabelLoader ||
      typeof svgBabelLoader !== "object" ||
      !("options" in svgBabelLoader) ||
      svgBabelLoader.options == null
    )
      throw new Error("Unable to locate sibling Babel loader in SVG loader.");
    if (typeof svgBabelLoader.options === "string")
      throw new Error("Unexpected layout for SVG loader.");
    svgBabelLoader.options.presets = babelLoader.options.presets;

// Inject babel-plugin-emotion
  config = injectBabelPlugin(
    [
      'emotion',
      {
        autoLabel: true,
        hoist: env === 'production',
        labelFormat: '[filename]--[local]',
        sourceMap: env !== 'production'
      }
    ],
    config
  )

  // Rewire typescript with our rewired babel config
  const babelLoader = getBabelLoader(config.module.rules)
  const tsLoader = getLoader(config.module.rules, rule => /ts|tsx/.test(rule.test))
  tsLoader.use.unshift({
    loader: babelLoader.loader,
    options: babelLoader.options
  })

  config.devtool = env !== 'production' ? 'source-map' : config.devtool

  return config 
}

function rewireBabel(config, _env) {
  const loader = getBabelLoader(config.module.rules);

  if (!loader) {
    console.warn('babel-loader not found'); // eslint-disable-line no-console
    return config;
  }

  loader.options = merge(loader.options, {
    babelrc: fs.existsSync(path.resolve(__dirname, './.babelrc'))
  });

  return config;
}

module.exports = function override(config, env) {
  config = injectBabelPlugin("babel-plugin-styled-components", config);
  config = rewireMobX(config, env);
  
  config.module.rules.push({
    test: /\.worker\.jsx$/,
    use: [
      { loader: 'worker-loader' },
      { loader: 'babel-loader' }
    ]
  })
  /*
  // If we want to apply the babel loader to some node module...
  config = rewireBabelLoader.include(
    config,
    resolveApp("node_modules/")
  );
  */

module.exports = function override(config, env) {
  config = injectBabelPlugin(
    ["import", { libraryName: "antd", style: true, libraryDirectory: "es" }],
    config,
  );

  if (env === "production") {
    // Remove default polyfills
    config.entry = { main: paths.appIndexJs };

    // Change css module class names in production
    const cssLoader = getLoader(
      config.module.rules,
      rule => String(rule.test) === String(/\.module\.css$/),
    ).loader.find(loader => loaderNameMatches(loader, "css-loader"));
    cssLoader.options.localIdentName = "ma-[hash:base64:8]";

    // Include bundle analyzation

if (env === 'development') {
    config = injectBabelPlugin(['dva-hmr'], config);
  } else {
    // 替换uglify为uglify-es否则,build时会出错
    config = removeWebpackPlugins(config, env, {
      pluginNames: ['UglifyJsPlugin']
    });
    config.plugins = (config.plugins || []).concat([
      new ParallelUglifyPlugin({
        uglifyES: {}
      })
    ]);
  }

  config = injectBabelPlugin('transform-decorators-legacy', config);
  config = injectBabelPlugin(
    ['import', { libraryName: 'antd', style: true }],
    config
  );

  config.externals = {};

  return rewireLess.withLoaderOptions(
    `${env === 'production' ? 'app' : '[local]'}-[hash:base64:8]`,
    {
      modifyVars: {}
    }
  )(config, env);
};

module.exports = function override(config, env) {
    // do stuff with the webpack config...
    config.output.publicPath = './';
    config = injectBabelPlugin(['import', { libraryName: 'antd', style: true }], config);
    config = injectBabelPlugin(['wrapper', {}], config);
    config = rewireLess.withLoaderOptions({
        modifyVars: { '@primary-color': '#1DA57A' },
        javascriptEnabled: true,
    })(config, env);

    return config;
};

return function(config, env) {
    const lessExtension = /\.less$/;

    const fileLoader = getLoader(
      config.module.rules,
      rule => loaderNameMatches(rule, 'file-loader')
    );
    fileLoader.exclude.push(lessExtension);

    const cssRules = getLoader(
      config.module.rules,
      rule => String(rule.test) === String(/\.css$/)
    );

    let lessRules;
    if (env === "production") {
      const lessLoader = cssRules.loader || cssRules.use

      lessRules = {
        test: lessExtension,
        loader: [
          // TODO: originally this part is wrapper in extract-text-webpack-plugin
          //       which we cannot do, so some things like relative publicPath
          //       will not work.
          //       https://github.com/timarney/react-app-rewired/issues/33
          ...lessLoader,

export default function(
  c: webpack.Configuration,
  options?: object
): webpack.Configuration {
  // Validate and narrow type
  const config = getValidatedConfig(c);

  // Grab the current ESLint config so we can copy some of its settings
  const esLintLoader = getLoader(config.module.rules, esLintLoaderMatcher);

  if (!esLintLoader) {
    throw new Error("Could not locate eslint-loader.");
  }

  // Create a new rule
  const tsLintLoader: webpack.RuleSetRule = {
    test: /\.(ts|tsx)$/,
    enforce: "pre",
    use: [
      {
        options,
        loader: require.resolve("tslint-loader")
      }
    ],
    include: esLintLoader.include,

'not ie < 9', // React doesn't support IE8 anyway
                ],
                flexbox: 'no-2009',
              }),
            ],
          },
        },
        {
          loader: require.resolve('sass-loader'),
        },
      ]
    }
  );

  // file-loader exclude
  let l = getLoader(config.module.rules, fileLoaderMatcher);
  l.exclude.push(/\.scss$/);

  return config;
};