Webpack开发服务器配置 - 最新版本中contentBase无法工作

Question

当我将webpack升级到4.0.0-beta.3并运行npx webpack serve时，我会收到这个错误：

[webpack-cli] Invalid configuration object. Object has been initialized using a configuration object that does not match the API schema.
 - configuration has an unknown property 'contentBase'. These properties are valid:
   object { bonjour?, client?, compress?, devMiddleware?, firewall?, headers?, historyApiFallback?, host?, hot?, http2?, https?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, public?, setupExitSignals?, static?, transportMode?, watchFiles? }

这是我的webpack.config.js文件，适用于3.11.2版本：

这是我的webpack.config.js文件，适用于3.11.2版本：

const path = require('path');
const ArcGISPlugin = require("@arcgis/webpack-plugin");

module.exports = {
  mode: 'development',
  entry: {
      main: './app/main.js'
  },
  plugins: [
      new ArcGISPlugin()
  ],
  devServer: {
      contentBase: './'
  }
}

我在package.json中的devDependencies：

  "devDependencies": {
    "@arcgis/webpack-plugin": "^4.18.0",
    "dojo-typings": "^1.11.11",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^4.0.0-beta.3"

如何更新我的配置文件以使最新版本工作？当我删除 dev server 对象时，服务器将运行，但提供的内容位于./public 目录下，而该目录不存在。

我是 webpack 新手，所以我还不太熟悉应用程序、配置和要求。

- roms

Answer 1

devServer: {
  static: './'
}

我应该更仔细地阅读错误信息。上述对象使我的配置再次正常运作。

- roms

---

谢谢兄弟，这里我的路径是"./public"，但没有区别。 - Armando Marques da S Sobrinho

Answer 2

使用 static 替代 contentBase，因为最新的 Webpack v5 已经弃用了 contentBase。

  devServer: {
    static: {
      directory: path.join(__dirname, "./")
    },

所有细节: https://webpack.js.org/configuration/dev-server/#devserver

- rottitime

Answer 3

  devServer: {
    static: {
      directory: path.join(__dirname, "public")
    },

    compress: true,
    port: 3010, // default 8000
  },

- skyTzy

---

请记住，Stack Overflow 不仅旨在解决当前的问题，还旨在帮助未来的读者找到类似问题的解决方案，这需要理解底层代码。对于我们社区中的初学者而言，这尤其重要，因为他们可能不熟悉语法。鉴于此，请你 [编辑] 你的回答，包括你正在做什么以及为什么认为这是最好的方法的解释。 - Jeremy Caney

Answer 4

使用static: './directory-name'代替contentBase: './directory-name'

示例:

devServer: {
  static: './dist'
}

- iamtheasad

Answer 5

instead of contentBase we are using static



enter code here
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,
    static: {
      directory: 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" } }]]
          }
        }
      }
    ]
  }
};

- Jai Kishan

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

Answer 6

Webpack 5 中的热模块重载（Hot Module Reload）功能通过以下方式启用：

devServer: {
   port: 8080,
   hot: "only",
   static: {
      directory: path.join(__dirname, './'),
      serveIndex: true,
    },
 },

- Maksym Dudyk

Answer 7

我曾使用node v18，现在已经切换到v16。并将codeBase更改为静态的。这对我起作用了。

devServer: { historyApiFallback: true, static: path.resolve(__dirname, './dist'), open: true, compress: true, hot: true, port: 8080, host: 'localhost' },

- Kip

Answer 8

使用 static 代替 contentBase 解决了我的问题。

- Igor Gonçalves

---

已经有几个答案说要使用 static 而不是 contentBase。你应该给那些答案点赞，而不是重复回答。 - K Scandrett

Answer 9

同时将 clean 设置为 false 也很重要。我曾经遇到过...

webpackConfig = {
  output: {
    clean: false
  }
}

- Carlos Oliveira

Answer 10

只需从您的配置选项中删除contentBase即可

删除webpackConfig.devServer.contentBase

例如： delete webpackConfig.devServer.contentBase

返回合并后的(webpackConfig, {...剩余代码})

- Rajesh Pal