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,23 +230,26 @@ 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';
// Add dev server config
// Copied from https://github.com/WordPress/gutenberg/blob/05bea6dd5c6198b0287c41a401d36a06b48831eb/packages/scripts/config/webpack.config.js#L312-L326 if ( isHot ) {
webpackConfig.devServer = { // Add dev server config
devMiddleware: { // Copied from https://github.com/WordPress/gutenberg/blob/05bea6dd5c6198b0287c41a401d36a06b48831eb/packages/scripts/config/webpack.config.js#L312-L326
writeToDisk: true, webpackConfig.devServer = {
}, devMiddleware: {
allowedHosts: 'auto', writeToDisk: true,
host: 'localhost', },
port: 8887, allowedHosts: 'auto',
proxy: { host: 'localhost',
'/build': { port: 8887,
pathRewrite: { proxy: {
'^/build': '', '/build': {
pathRewrite: {
'^/build': '',
},
}, },
}, },
}, };
}; }
} }
module.exports = webpackConfig; module.exports = webpackConfig;