Disable React Fast Refresh completely in webpack when running start command

This commit is contained in:
Chi-Hsuan Huang 2023-03-17 17:52:24 +08:00
parent 196c4f889c
commit a6e3398e06
2 changed files with 22 additions and 17 deletions

View File

@ -38,7 +38,7 @@
"run:packages": "pnpm run --parallel --filter='../../packages/js/**'", "run:packages": "pnpm run --parallel --filter='../../packages/js/**'",
"prestart": "pnpm packages:build && cross-env WC_ADMIN_PHASE=development pnpm run build:feature-config", "prestart": "pnpm packages:build && cross-env WC_ADMIN_PHASE=development pnpm run build:feature-config",
"start": "concurrently \"cross-env WC_ADMIN_PHASE=development webpack --watch\" \"cross-env WC_ADMIN_PHASE=development pnpm packages:watch\"", "start": "concurrently \"cross-env WC_ADMIN_PHASE=development webpack --watch\" \"cross-env WC_ADMIN_PHASE=development pnpm packages:watch\"",
"start:hot": "pnpm prestart && concurrently \"cross-env WC_ADMIN_PHASE=development webpack serve\" \"cross-env WC_ADMIN_PHASE=development pnpm packages:watch\"", "start:hot": "pnpm prestart && concurrently \"cross-env HOT=true WC_ADMIN_PHASE=development webpack serve\" \"cross-env WC_ADMIN_PHASE=development pnpm packages:watch\"",
"test-staged": "pnpm run test:client --bail --findRelatedTests", "test-staged": "pnpm run test:client --bail --findRelatedTests",
"test:client": "jest --config client/jest.config.js", "test:client": "jest --config client/jest.config.js",
"test:debug": "node --inspect-brk ./node_modules/.bin/jest --config client/jest.config.js --watch --runInBand --no-cache", "test:debug": "node --inspect-brk ./node_modules/.bin/jest --config client/jest.config.js --watch --runInBand --no-cache",

View File

@ -22,6 +22,7 @@ const WooCommerceDependencyExtractionWebpackPlugin = require( '../../packages/js
const NODE_ENV = process.env.NODE_ENV || 'development'; const NODE_ENV = process.env.NODE_ENV || 'development';
const WC_ADMIN_PHASE = process.env.WC_ADMIN_PHASE || 'development'; const WC_ADMIN_PHASE = process.env.WC_ADMIN_PHASE || 'development';
const isHot = Boolean( process.env.HOT );
const isProduction = NODE_ENV === 'production'; const isProduction = NODE_ENV === 'production';
const wcAdminPackages = [ const wcAdminPackages = [
@ -134,6 +135,7 @@ const webpackConfig = {
plugins: [ plugins: [
'@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-class-properties',
! isProduction && ! isProduction &&
isHot &&
require.resolve( 'react-refresh/babel' ), require.resolve( 'react-refresh/babel' ),
].filter( Boolean ), ].filter( Boolean ),
}, },
@ -190,7 +192,7 @@ const webpackConfig = {
} ) ), } ) ),
} ), } ),
// React Fast Refresh. // React Fast Refresh.
! isProduction && new ReactRefreshWebpackPlugin(), ! isProduction && isHot && new ReactRefreshWebpackPlugin(),
// We reuse this Webpack setup for Storybook, where we need to disable dependency extraction. // We reuse this Webpack setup for Storybook, where we need to disable dependency extraction.
! process.env.STORYBOOK && ! process.env.STORYBOOK &&
@ -228,6 +230,8 @@ const webpackConfig = {
if ( ! isProduction || WC_ADMIN_PHASE === 'development' ) { if ( ! isProduction || WC_ADMIN_PHASE === 'development' ) {
// Set default sourcemap mode if it wasn't set by WP_DEVTOOL. // Set default sourcemap mode if it wasn't set by WP_DEVTOOL.
webpackConfig.devtool = webpackConfig.devtool || 'source-map'; webpackConfig.devtool = webpackConfig.devtool || 'source-map';
if ( isHot ) {
// Add dev server config // Add dev server config
// Copied from https://github.com/WordPress/gutenberg/blob/05bea6dd5c6198b0287c41a401d36a06b48831eb/packages/scripts/config/webpack.config.js#L312-L326 // Copied from https://github.com/WordPress/gutenberg/blob/05bea6dd5c6198b0287c41a401d36a06b48831eb/packages/scripts/config/webpack.config.js#L312-L326
webpackConfig.devServer = { webpackConfig.devServer = {
@ -246,5 +250,6 @@ if ( ! isProduction || WC_ADMIN_PHASE === 'development' ) {
}, },
}; };
} }
}
module.exports = webpackConfig; module.exports = webpackConfig;