我的 webpack 配置显示列表目录而不是我的开发应用程序页面

Question

我寻找问题的答案。

当我在我的 WordPress 主题项目中启动命令“npm run watch”时。我的 webpack-dev-server 启动了，但我在列表目录上只有一个浏览器页面。

我的 webpack.config.js :

const path = require('path'),
removeEmptyScriptsPlugin = require('webpack-remove-empty-scripts'),
webpackConfig = require('@wordpress/scripts/config/webpack.config');

// Extend the @wordpress webpack config and add the entry points.
module.exports = {
    ...webpackConfig,
    ...{
        mode: 'production',
        devServer: {
            static: {
                directory: path.join(__dirname, '/'),
            },
            client: {
                overlay: false,
            },
            hot: true,
            compress: true,
            devMiddleware: {
                writeToDisk: true,
            },
        },
        context: path.resolve(__dirname, 'assets'),
        entry: ['./main.js', './main.scss'],
        // jQuery support
        /*externals: {
            jquery: "jQuery",
        },*/
        plugins: [
            ...webpackConfig.plugins,
            /*new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
            }),*/
            new removeEmptyScriptsPlugin({
                stage: removeEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS,
            }),
        ],
    },
};

我的 WordPress 的结构：

project/app/public/standard-wordpress-files-structure/wp-content/themes/theme

以及主题的结构：

知道发生了什么以及如何解决它吗？

我尝试添加 publicPath 但没有任何变化。

将

directory: path.join(__dirname, 'assets'),

更改为

directory: path.join(__dirname, '/'),

我测试了2个本地开发环境：

• 首先，一个phpmonitor（代客）
• 带有 Local
的 WordPress 开发环境

没有差异

Answer 1

编辑：浏览器屏幕中使用的端口（;9000）是尝试添加

port: 9000,

。没有成功。