Webpack 开发服务器配置 - contentBase 在最新版本中不起作用

Posted 2023-02-22

【中文标题】Webpack 开发服务器配置 - contentBase 在最新版本中不起作用

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

【发布时间】：2021-08-27 18:37:15

【问题描述】：

当我将 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? 

这是我在 3.11.2 中工作的 webpack.config.js：

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"

如何更新我的配置以使最新版本正常工作？当我取出开发服务器对象时，服务器将运行，但从 ./public 中提供不存在的内容。

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

【参考方案1】：

  devServer: 
  static: './'
 

我应该更仔细地阅读这些错误。上面的对象使我的配置再次工作。

【讨论】：

感谢您解决了我的问题。帮助很大！！

【参考方案2】：

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"  ]]
          
        
      
    ]
  
;

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。