| 1 | 'use strict'; |
| 2 | |
| 3 | const {resolve} = require('path'); |
| 4 | const Webpack = require('webpack'); |
| 5 | |
| 6 | const NODE_ENV = process.env.NODE_ENV || 'development'; |
| 7 | const __DEV__ = NODE_ENV === 'development'; |
| 8 | const HOST = process.env.HOST || '127.0.0.1'; |
| 9 | const PORT = Number(process.env.PORT || 8080); |
| 10 | const isE2E = process.env.E2E === 'true' || process.env.CI === 'true'; |
| 11 | |
| 12 | // React and the DevTools backend dependencies the facade pulls in are resolved |
| 13 | // from the monorepo build output — the same approach react-devtools-shell uses, |
| 14 | // so the fixture runs against React from source rather than a CDN copy. Run |
| 15 | // `yarn build-for-devtools` from the repo root first to populate this folder. |
| 16 | const builtModulesDir = resolve( |
| 17 | __dirname, |
| 18 | '..', |
| 19 | '..', |
| 20 | '..', |
| 21 | '..', |
| 22 | 'build', |
| 23 | 'oss-experimental' |
| 24 | ); |
| 25 | |
| 26 | const sharedDir = resolve(__dirname, '..', '..', '..', 'react-devtools-shared'); |
| 27 | |
| 28 | module.exports = { |
| 29 | mode: __DEV__ ? 'development' : 'production', |
| 30 | devtool: __DEV__ ? 'cheap-source-map' : 'source-map', |
| 31 | entry: './index.js', |
| 32 | output: { |
| 33 | filename: 'bundle.js', |
| 34 | publicPath: '/dist/', |
| 35 | }, |
| 36 | node: { |
| 37 | global: false, |
| 38 | }, |
| 39 | resolve: { |
| 40 | alias: { |
| 41 | react: resolve(builtModulesDir, 'react'), |
| 42 | 'react-debug-tools': resolve(builtModulesDir, 'react-debug-tools'), |
| 43 | 'react-devtools-feature-flags': resolve( |
| 44 | sharedDir, |
| 45 | 'src', |
| 46 | 'config', |
| 47 | 'DevToolsFeatureFlags.default' |
| 48 | ), |
| 49 | 'react-dom/client': resolve(builtModulesDir, 'react-dom/client'), |
| 50 | 'react-dom': resolve(builtModulesDir, 'react-dom'), |
| 51 | 'react-is': resolve(builtModulesDir, 'react-is'), |
| 52 | scheduler: resolve(builtModulesDir, 'scheduler'), |
| 53 | }, |
| 54 | }, |
| 55 | optimization: { |
| 56 | minimize: false, |
| 57 | }, |
| 58 | plugins: [ |
| 59 | new Webpack.ProvidePlugin({ |
| 60 | process: 'process/browser', |
| 61 | }), |
| 62 | new Webpack.DefinePlugin({ |
| 63 | __DEV__, |
| 64 | __EXPERIMENTAL__: true, |
| 65 | __EXTENSION__: false, |
| 66 | __PROFILE__: false, |
| 67 | __TEST__: false, |
| 68 | __IS_CHROME__: false, |
| 69 | __IS_FIREFOX__: false, |
| 70 | __IS_EDGE__: false, |
| 71 | __IS_NATIVE__: false, |
| 72 | }), |
| 73 | ], |
| 74 | module: { |
| 75 | rules: [ |
| 76 | { |
| 77 | test: /\.js$/, |
| 78 | loader: 'babel-loader', |
| 79 | options: { |
| 80 | configFile: resolve(sharedDir, 'babel.config.js'), |
| 81 | }, |
| 82 | }, |
| 83 | ], |
| 84 | }, |
| 85 | devServer: { |
| 86 | hot: true, |
| 87 | host: HOST, |
| 88 | open: !isE2E, |
| 89 | port: PORT, |
| 90 | static: { |
| 91 | directory: __dirname, |
| 92 | publicPath: '/', |
| 93 | }, |
| 94 | }, |
| 95 | }; |