| 1 | const {resolve} = require('path'); |
| 2 | const Webpack = require('webpack'); |
| 3 | const { |
| 4 | GITHUB_URL, |
| 5 | getVersionString, |
| 6 | } = require('react-devtools-extensions/utils'); |
| 7 | const {resolveFeatureFlags} = require('react-devtools-shared/buildUtils'); |
| 8 | |
| 9 | const NODE_ENV = process.env.NODE_ENV; |
| 10 | if (!NODE_ENV) { |
| 11 | console.error('NODE_ENV not set'); |
| 12 | process.exit(1); |
| 13 | } |
| 14 | |
| 15 | const __DEV__ = NODE_ENV === 'development'; |
| 16 | |
| 17 | const EDITOR_URL = process.env.EDITOR_URL || null; |
| 18 | |
| 19 | const DEVTOOLS_VERSION = getVersionString(); |
| 20 | |
| 21 | const babelOptions = { |
| 22 | configFile: resolve( |
| 23 | __dirname, |
| 24 | '..', |
| 25 | 'react-devtools-shared', |
| 26 | 'babel.config.js', |
| 27 | ), |
| 28 | }; |
| 29 | |
| 30 | module.exports = { |
| 31 | mode: __DEV__ ? 'development' : 'production', |
| 32 | devtool: __DEV__ ? 'eval-cheap-source-map' : 'source-map', |
| 33 | entry: { |
| 34 | backend: './src/backend.js', |
| 35 | frontend: './src/frontend.js', |
| 36 | hookNames: './src/hookNames.js', |
| 37 | }, |
| 38 | output: { |
| 39 | path: __dirname + '/dist', |
| 40 | publicPath: '/dist/', |
| 41 | filename: '[name].js', |
| 42 | chunkFilename: '[name].chunk.js', |
| 43 | library: { |
| 44 | type: 'commonjs2', |
| 45 | }, |
| 46 | }, |
| 47 | externals: { |
| 48 | react: 'react', |
| 49 | 'react-dom': 'react-dom', |
| 50 | 'react-dom/client': 'react-dom/client', |
| 51 | 'react-is': 'react-is', |
| 52 | scheduler: 'scheduler', |
| 53 | }, |
| 54 | node: { |
| 55 | global: false, |
| 56 | }, |
| 57 | resolve: { |
| 58 | alias: { |
| 59 | 'react-devtools-feature-flags': resolveFeatureFlags('inline'), |
| 60 | }, |
| 61 | }, |
| 62 | optimization: { |
| 63 | minimize: false, |
| 64 | }, |
| 65 | plugins: [ |
| 66 | new Webpack.ProvidePlugin({ |
| 67 | process: 'process/browser', |
| 68 | }), |
| 69 | new Webpack.DefinePlugin({ |
| 70 | __DEV__, |
| 71 | __EXPERIMENTAL__: true, |
| 72 | __EXTENSION__: false, |
| 73 | __PROFILE__: false, |
| 74 | __TEST__: NODE_ENV === 'test', |
| 75 | // TODO: Should this be feature tested somehow? |
| 76 | __IS_CHROME__: false, |
| 77 | __IS_FIREFOX__: false, |
| 78 | __IS_EDGE__: false, |
| 79 | __IS_NATIVE__: false, |
| 80 | 'process.env.DEVTOOLS_PACKAGE': `"react-devtools-inline"`, |
| 81 | 'process.env.DEVTOOLS_VERSION': `"${DEVTOOLS_VERSION}"`, |
| 82 | 'process.env.EDITOR_URL': EDITOR_URL != null ? `"${EDITOR_URL}"` : null, |
| 83 | 'process.env.GITHUB_URL': `"${GITHUB_URL}"`, |
| 84 | 'process.env.NODE_ENV': `"${NODE_ENV}"`, |
| 85 | }), |
| 86 | ], |
| 87 | module: { |
| 88 | rules: [ |
| 89 | { |
| 90 | test: /\.worker\.js$/, |
| 91 | use: [ |
| 92 | { |
| 93 | loader: 'workerize-loader', |
| 94 | options: { |
| 95 | // Workers would have to be exposed on a public path in order to outline them. |
| 96 | inline: true, |
| 97 | name: '[name]', |
| 98 | }, |
| 99 | }, |
| 100 | { |
| 101 | loader: 'babel-loader', |
| 102 | options: babelOptions, |
| 103 | }, |
| 104 | ], |
| 105 | }, |
| 106 | { |
| 107 | test: /\.js$/, |
| 108 | loader: 'babel-loader', |
| 109 | options: babelOptions, |
| 110 | }, |
| 111 | { |
| 112 | test: /\.css$/, |
| 113 | use: [ |
| 114 | { |
| 115 | loader: 'style-loader', |
| 116 | }, |
| 117 | { |
| 118 | loader: 'css-loader', |
| 119 | options: { |
| 120 | sourceMap: __DEV__, |
| 121 | modules: true, |
| 122 | localIdentName: '[local]___[hash:base64:5]', |
| 123 | }, |
| 124 | }, |
| 125 | ], |
| 126 | }, |
| 127 | ], |
| 128 | }, |
| 129 | }; |