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

Posted 2023-02-19

【中文标题】Webpack 开发服务器配置 - contentBase 不工作

【英文标题】：Webpack Dev Server Config - contentBase not working

【发布时间】：2022-01-15 11:02:21

【问题描述】：

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

[webpack-cli] 无效的选项对象。开发服务器已使用与 API 架构不匹配的选项对象进行初始化。 options 具有未知属性“contentBase”。这些属性是有效的： object allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magichtml?, onAfterSetupMiddleware?, 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'  ],
                        ],
                    ,
                ,
            ,
        ],
    ,
;

我的文件：enter image description here

期待你的回答！谢谢

【参考方案1】：

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

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

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

【讨论】：

这似乎解决了这个问题。但是，现在我收到一个参考错误：“ReferenceError：未定义解析”。会是什么？

更新了答案 - 这是来自path 模块的方法