Webpack devServer本地配置问题：错误URL与端口占用

问题根源 #

1. 注释port后，Webpack DevServer会自动分配可用端口（比如你的8085），但未指定自动打开的目标页面，导致默认打开DevServer的根路径，进而展示静态资源目录的文件列表。
2. WordPress运行在Apache的80端口，DevServer需要与Apache配合，通过代理转发请求，才能正确加载WordPress页面并注入React热重载资源。

Webpack配置修改（webpack.config.js） #

调整devServer和output的核心配置，解决端口、自动打开路径及资源加载问题：

const path = require('path');

module.exports = {
  // ...其他配置
  output: {
    path: path.resolve(__dirname, 'assets/js'),
    filename: 'bundle.js',
    // 与DevServer的publicPath保持一致，确保资源正确指向DevServer
    publicPath: 'http://localhost:8086/assets/js/'
  },
  devServer: {
    // 指定未被占用的端口（避开80和8085）
    port: 8086,
    // 启用热重载
    hot: true,
    // 禁止展示静态资源目录的文件列表
    directoryListing: false,
    // 静态资源根目录
    contentBase: path.resolve(__dirname, 'assets'),
    // 资源访问路径前缀
    publicPath: 'http://localhost:8086/assets/js/',
    // 自动打开浏览器并跳转至指定页面
    open: true,
    openPage: '/shuffledink/builder',
    // 代理WordPress请求到Apache的80端口
    proxy: {
      '/shuffledink': {
        target: 'http://localhost',
        changeOrigin: true
      }
    }
  }
};

package.json脚本调整 #

确保start命令正确启动带热重载的DevServer：

{
  "scripts": {
    "start": "webpack-dev-server --mode development --hot"
  }
}

WordPress插件PHP代码调整 #

通过环境判断加载对应资源，避免开发环境加载本地打包文件：

<?php
function enqueue_react_builder_assets() {
    // 开发环境判断（需在wp-config.php中定义WP_ENV为development）
    if (defined('WP_ENV') && WP_ENV === 'development') {
        wp_enqueue_script(
            'react-builder',
            'http://localhost:8086/assets/js/bundle.js',
            array(),
            time(), // 避免缓存
            true
        );
    } else {
        wp_enqueue_script(
            'react-builder',
            plugin_dir_url(__FILE__) . 'assets/js/bundle.js',
            array(),
            '1.0.0',
            true
        );
    }
}
add_action('admin_enqueue_scripts', 'enqueue_react_builder_assets');
// 若builder在前端页面，改用wp_enqueue_scripts钩子
?>

验证步骤 #

1. 确保XAMPP的Apache服务正常运行，WordPress站点http://localhost/shuffledink/builder可正常访问。
2. 执行npm start，DevServer会自动打开浏览器并跳转至http://localhost/shuffledink/builder。
3. 修改React代码，页面应自动刷新热重载，无需手动刷新。

内容的提问来源于stack exchange，提问作者Dominick Allen