**問題**： 在webpack.config.js通過contentBase配置靜態資源路徑，使用 webpack 運行時（ `npm run dev` ）無法運行、 **發生場景**： 在 webpack.config.js 配置了devServer，通過contentBase 配置了靜態資源的路徑， 配置類似： ``` const path = require('path') // 處理絕對路徑 module.exports = { mode: 'development', entry: path.join(__dirname, '/src/index.js'), // 入口文件 output: { path: path.join(__dirname, '/dist'), //打包后的文件存放的地方 filename: 'bundle.js' //打包后輸出文件的文件名 }, devServer: { contentBase: './dist', // 此配置項在 5 版本已經修改 port: '8088', // 設置端口號為8088 } } ``` 使用 `npm run dev` 啟動服務時報錯誤： ``` [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options has an unknown property 'contentBase'. These properties are valid: object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, magicHtml?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, server?, setupExitSignals?, setupMiddlewares?, static?, watchFiles?, webSocketServer? } ``` **原因及解析**： 錯誤信息中提示了contentBase 不是有效的配置項， 而且錯誤信息中也羅列了有效的配置項。的確，contentBase并不在其中。 這個原因是 Weback 5 將 contentBase的配置修改為 static了。 **解決方法**： 解決方法是將contentBase 修改為static。 `static:'./dist',` 官方推薦比較好的處理方式使用絕對路徑的配置方式： ``` static: { //服務器所加載文件的目錄 directory: path.join(__dirname, 'dist'), }, ``` 關于 devServer的詳細配置， 可以參考： [https://webpack.docschina.org/configuration/dev-server/#devserverstatic](https://webpack.docschina.org/configuration/dev-server/#devserverstatic)