Webpack 开发服务器配置 - contentBase 不起作用

Question

我正在尝试设置 Webpack 开发服务器，但由于某种原因，我遇到了错误。

[webpack-cli] 选项对象无效。开发服务器已使用与 API 架构不匹配的选项对象进行初始化。 options 有一个未知属性“contentBase”。这些属性是有效的： 对象{ allowedHosts？，bonjour？，客户端？，压缩？，devMiddleware？，标头？，historyApiFallback？，主机？，hot？，http2？，https？，ipc？，liveReload？，magicHtml？，onAfterSetupMiddleware？，onBeforeSetupMiddleware？， onListening？，打开？，端口？，代理？，服务器？，setupExitSignals？，静态？，watchFiles？，webSocketServer？ }

我确实在全球范围内安装了所有需要的软件包，并尝试了一些其他建议，但我无法让它工作。

这是配置：

const path = require('path');

module.exports = {
    entry: './app/Main.js',
    output: {
        publicPath: '/',
        path: path.resolve(__dirname, 'app'),
        filename: 'bundled.js',
    },
    mode: 'development',
    devtool: 'source-map',
    devServer: {
        port: 3000,
        contentBase: path.join(__dirname, 'app'),
        hot: true,
        historyApiFallback: { index: 'index.html' },
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-react',
                            ['@babel/preset-env', { targets: { node: '12' } }],
                        ],
                    },
                },
            },
        ],
    },
};

我的文件：

期待您的答复！谢谢

Answer 1

我可以假设错误是在迁移到最新版本的 Webpack/DevServer 后出现的，他们做了一些重大更改，包括 devServer 设置。 特别是对于这个问题，请尝试使用此代码而不是

contentBase

：

  devServer: {
    static: {
      directory: path.resolve(__dirname, 'app'),
    },
   ...

这是可以提供帮助的完整迁移指南https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md

Answer 2

完整代码在这里

const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
require('babel-register')

module.exports = {
    entry: ['@babel/polyfill', './src/app.js'],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: ['babel-loader']
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: './index.html'
        })
    ],
    mode: 'development',
    devtool: 'inline-source-map',
        devServer: {
            static: {
              directory: path.resolve(__dirname, 'app'),
            },
        }
}