Webpack 開發服務器配置 - contentBase 不工作

Question

我正在嘗試設置 webpack 開發服務器，但由於某種原因，我遇到了錯誤。

[webpack-cli] 無效的選項 object。 已使用與 API 架構不匹配的選項 object 初始化開發服務器。 options 具有未知屬性“contentBase”。 這些屬性有效： object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveSettml? ?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, static?, 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