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/**'",
"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: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: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",

View File

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