1. 'use strict';
    
  2. 
    
  3. const {resolve} = require('path');
    
  4. const Webpack = require('webpack');
    
  5. const TerserPlugin = require('terser-webpack-plugin');
    
  6. const {
    
  7.   DARK_MODE_DIMMED_WARNING_COLOR,
    
  8.   DARK_MODE_DIMMED_ERROR_COLOR,
    
  9.   DARK_MODE_DIMMED_LOG_COLOR,
    
  10.   LIGHT_MODE_DIMMED_WARNING_COLOR,
    
  11.   LIGHT_MODE_DIMMED_ERROR_COLOR,
    
  12.   LIGHT_MODE_DIMMED_LOG_COLOR,
    
  13.   GITHUB_URL,
    
  14.   getVersionString,
    
  15. } = require('./utils');
    
  16. const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils');
    
  17. 
    
  18. const NODE_ENV = process.env.NODE_ENV;
    
  19. if (!NODE_ENV) {
    
  20.   console.error('NODE_ENV not set');
    
  21.   process.exit(1);
    
  22. }
    
  23. 
    
  24. const builtModulesDir = resolve(
    
  25.   __dirname,
    
  26.   '..',
    
  27.   '..',
    
  28.   'build',
    
  29.   'oss-experimental',
    
  30. );
    
  31. 
    
  32. const __DEV__ = NODE_ENV === 'development';
    
  33. 
    
  34. const DEVTOOLS_VERSION = getVersionString(process.env.DEVTOOLS_VERSION);
    
  35. 
    
  36. const EDITOR_URL = process.env.EDITOR_URL || null;
    
  37. const LOGGING_URL = process.env.LOGGING_URL || null;
    
  38. 
    
  39. const IS_CHROME = process.env.IS_CHROME === 'true';
    
  40. const IS_FIREFOX = process.env.IS_FIREFOX === 'true';
    
  41. const IS_EDGE = process.env.IS_EDGE === 'true';
    
  42. 
    
  43. const featureFlagTarget = process.env.FEATURE_FLAG_TARGET || 'extension-oss';
    
  44. 
    
  45. const babelOptions = {
    
  46.   configFile: resolve(
    
  47.     __dirname,
    
  48.     '..',
    
  49.     'react-devtools-shared',
    
  50.     'babel.config.js',
    
  51.   ),
    
  52. };
    
  53. 
    
  54. module.exports = {
    
  55.   mode: __DEV__ ? 'development' : 'production',
    
  56.   devtool: __DEV__ ? 'cheap-module-source-map' : false,
    
  57.   entry: {
    
  58.     background: './src/background/index.js',
    
  59.     backendManager: './src/contentScripts/backendManager.js',
    
  60.     fileFetcher: './src/contentScripts/fileFetcher.js',
    
  61.     main: './src/main/index.js',
    
  62.     panel: './src/panel.js',
    
  63.     proxy: './src/contentScripts/proxy.js',
    
  64.     prepareInjection: './src/contentScripts/prepareInjection.js',
    
  65.     renderer: './src/contentScripts/renderer.js',
    
  66.     installHook: './src/contentScripts/installHook.js',
    
  67.   },
    
  68.   output: {
    
  69.     path: __dirname + '/build',
    
  70.     publicPath: '/build/',
    
  71.     filename: '[name].js',
    
  72.     chunkFilename: '[name].chunk.js',
    
  73.   },
    
  74.   node: {
    
  75.     global: false,
    
  76.   },
    
  77.   resolve: {
    
  78.     alias: {
    
  79.       react: resolve(builtModulesDir, 'react'),
    
  80.       'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'),
    
  81.       'react-devtools-feature-flags': resolveFeatureFlags(featureFlagTarget),
    
  82.       'react-dom/client': resolve(builtModulesDir, 'react-dom/client'),
    
  83.       'react-dom': resolve(builtModulesDir, 'react-dom'),
    
  84.       'react-is': resolve(builtModulesDir, 'react-is'),
    
  85.       scheduler: resolve(builtModulesDir, 'scheduler'),
    
  86.     },
    
  87.   },
    
  88.   optimization: {
    
  89.     minimize: !__DEV__,
    
  90.     minimizer: [
    
  91.       new TerserPlugin({
    
  92.         terserOptions: {
    
  93.           compress: {
    
  94.             unused: true,
    
  95.             dead_code: true,
    
  96.           },
    
  97.           mangle: {
    
  98.             keep_fnames: true,
    
  99.           },
    
  100.           format: {
    
  101.             comments: false,
    
  102.           },
    
  103.         },
    
  104.         extractComments: false,
    
  105.       }),
    
  106.     ],
    
  107.   },
    
  108.   plugins: [
    
  109.     new Webpack.ProvidePlugin({
    
  110.       process: 'process/browser',
    
  111.       Buffer: ['buffer', 'Buffer'],
    
  112.     }),
    
  113.     new Webpack.DefinePlugin({
    
  114.       __DEV__,
    
  115.       __EXPERIMENTAL__: true,
    
  116.       __EXTENSION__: true,
    
  117.       __PROFILE__: false,
    
  118.       __TEST__: NODE_ENV === 'test',
    
  119.       __IS_CHROME__: IS_CHROME,
    
  120.       __IS_FIREFOX__: IS_FIREFOX,
    
  121.       __IS_EDGE__: IS_EDGE,
    
  122.       'process.env.DEVTOOLS_PACKAGE': `"react-devtools-extensions"`,
    
  123.       'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`,
    
  124.       'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null,
    
  125.       'process.env.GITHUB_URL': `"${GITHUB_URL}"`,
    
  126.       'process.env.LOGGING_URL': `"${LOGGING_URL}"`,
    
  127.       'process.env.NODE_ENV': `"${NODE_ENV}"`,
    
  128.       'process.env.DARK_MODE_DIMMED_WARNING_COLOR': `"${DARK_MODE_DIMMED_WARNING_COLOR}"`,
    
  129.       'process.env.DARK_MODE_DIMMED_ERROR_COLOR': `"${DARK_MODE_DIMMED_ERROR_COLOR}"`,
    
  130.       'process.env.DARK_MODE_DIMMED_LOG_COLOR': `"${DARK_MODE_DIMMED_LOG_COLOR}"`,
    
  131.       'process.env.LIGHT_MODE_DIMMED_WARNING_COLOR': `"${LIGHT_MODE_DIMMED_WARNING_COLOR}"`,
    
  132.       'process.env.LIGHT_MODE_DIMMED_ERROR_COLOR': `"${LIGHT_MODE_DIMMED_ERROR_COLOR}"`,
    
  133.       'process.env.LIGHT_MODE_DIMMED_LOG_COLOR': `"${LIGHT_MODE_DIMMED_LOG_COLOR}"`,
    
  134.     }),
    
  135.   ],
    
  136.   module: {
    
  137.     defaultRules: [
    
  138.       {
    
  139.         type: 'javascript/auto',
    
  140.         resolve: {},
    
  141.       },
    
  142.       {
    
  143.         test: /\.json$/i,
    
  144.         type: 'json',
    
  145.       },
    
  146.     ],
    
  147. 
    
  148.     rules: [
    
  149.       {
    
  150.         test: /\.worker\.js$/,
    
  151.         use: [
    
  152.           {
    
  153.             loader: 'workerize-loader',
    
  154.             options: {
    
  155.               inline: true,
    
  156.               name: '[name]',
    
  157.             },
    
  158.           },
    
  159.           {
    
  160.             loader: 'babel-loader',
    
  161.             options: babelOptions,
    
  162.           },
    
  163.         ],
    
  164.       },
    
  165.       {
    
  166.         test: /\.js$/,
    
  167.         loader: 'babel-loader',
    
  168.         options: babelOptions,
    
  169.       },
    
  170.       {
    
  171.         test: /\.css$/,
    
  172.         use: [
    
  173.           {
    
  174.             loader: 'style-loader',
    
  175.           },
    
  176.           {
    
  177.             loader: 'css-loader',
    
  178.             options: {
    
  179.               sourceMap: true,
    
  180.               modules: true,
    
  181.               localIdentName: '[local]___[hash:base64:5]',
    
  182.             },
    
  183.           },
    
  184.         ],
    
  185.       },
    
  186.     ],
    
  187.   },
    
  188. };