module() — react Function Reference

Architecture documentation for the module() function in webpack.config.js from the react codebase.

Function javascript BabelCompiler Entrypoint calls 1

Entity Profile

BabelCompiler→ Entrypoint→ module() — react Function Reference

Dependency Diagram

graph TD
  10caaa3c_e84d_f9ad_7e22_78394ea4cdb6["module()"]
  e917b1c4_0663_baec_6b35_c3176e1273a1["webpack.config.js"]
  10caaa3c_e84d_f9ad_7e22_78394ea4cdb6 -->|defined in| e917b1c4_0663_baec_6b35_c3176e1273a1
  42efa651_59d5_0cc1_9e07_d35d53186bab["createEnvironmentHash()"]
  10caaa3c_e84d_f9ad_7e22_78394ea4cdb6 -->|calls| 42efa651_59d5_0cc1_9e07_d35d53186bab
  style 10caaa3c_e84d_f9ad_7e22_78394ea4cdb6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/flight/config/webpack.config.js lines 81–702

module.exports = function (webpackEnv) {
  const isEnvDevelopment = webpackEnv === 'development';
  const isEnvProduction = webpackEnv === 'production';

  // Variable used for enabling profiling in Production
  // passed into alias object. Uses a flag if passed into the build command
  const isEnvProductionProfile =
    isEnvProduction && process.argv.includes('--profile');

  // We will provide `paths.publicUrlOrPath` to our app
  // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
  // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
  // Get environment variables to inject into our app.
  const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));

  const shouldUseReactRefresh = env.raw.FAST_REFRESH;

  // common function to get style loaders
  const getStyleLoaders = (cssOptions, preProcessor) => {
    const loaders = [
      isEnvDevelopment && require.resolve('style-loader'),
      {
        loader: MiniCssExtractPlugin.loader,
        // css is located in `static/css`, use '../../' to locate index.html folder
        // in production `paths.publicUrlOrPath` can be a relative path
        options: paths.publicUrlOrPath.startsWith('.')
          ? {publicPath: '../../'}
          : {},
      },
      {
        loader: require.resolve('css-loader'),
        options: cssOptions,
      },
      {
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options: {
          postcssOptions: {
            // Necessary for external CSS imports to work
            // https://github.com/facebook/create-react-app/issues/2677
            ident: 'postcss',
            config: false,
            plugins: !useTailwind
              ? [
                  'postcss-flexbugs-fixes',
                  [
                    'postcss-preset-env',
                    {
                      autoprefixer: {
                        flexbox: 'no-2009',
                      },
                      stage: 3,
                    },
                  ],
                  // Adds PostCSS Normalize as the reset css with default options,
                  // so that it honors browserslist config in package.json
                  // which in turn let's users customize the target behavior as per their needs.
                  'postcss-normalize',
                ]
              : [
                  'tailwindcss',
                  'postcss-flexbugs-fixes',
                  [
                    'postcss-preset-env',
                    {
                      autoprefixer: {
                        flexbox: 'no-2009',
                      },
                      stage: 3,
                    },
                  ],
                ],
          },
          sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment,
        },
      },
    ].filter(Boolean);
    if (preProcessor) {
      loaders.push(