javascript - 如何使用新的 Webpack devServer 配置?
问题描述
webpack devServer
将我的项目包从更新为 后,当我"webpack-dev-server": "3.11.2"
开始"webpack-dev-server": "4.3.0"
我的项目时,我遇到了这个问题:
>> npm run start
> backoffice@1.0.0 start
> webpack serve --config webpack.dev.js
[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 'writeToDisk'. 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?, setupExitSignals?, static?, watchFiles?, webSocketServer? }
更改日志似乎没有更新,我只发现了几个新选项:更多信息在这里
如何将此“旧”配置文件转换为新配置文件?
如果可能的话,我在哪里可以找到新的配置选项?
webpack.dev.js:
const {merge} = require('webpack-merge');
const common = require('./webpack.common.js');
const path = require('path');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, './dist'),
compress: true,
watchContentBase: true,
historyApiFallback: true,
https: false,
open: 'Firefox Developer Edition',
stats: {
colors: true,
},
port: 9002,
proxy: {
'/api': 'http://localhost:9000'
},
writeToDisk: true,
},
});
感谢您的帮助
解决方案
您只需使用不允许的字段。你的开发服务器应该这样写:
devServer: {
static: {
directory: path.join(__dirname, './dist')
},
compress: true,
historyApiFallback: true,
https: false,
open: true,
hot: true,
port: 9002,
proxy: {
'/api': 'http://localhost:9000'
}
devMiddleware: {
writeToDisk: true,
},
},
// ps: you don't need 'static' for ./dist . DevServer is here to compile and hot reload the js code that is attached to the "root" node. The dist folder is supposed to contain your final build.
// to use writeToDisk, you'll need to install webpack-dev-middleware
// npm install webpack-dev-middleware --save-dev
推荐阅读
- angular - VS Code 修复库的导入路径
- messagekit - 官方示例中消息左对齐和右对齐的条件在哪里?
- python - 用 python 和 Pandas 重塑多个变量
- python - 如何按回车键换行?
- visual-studio-code - 如何使用扩展定义并且不允许以与多个验证器兼容的方式附加属性(JSON 模式草案 7)?
- pandas - 在 Pandas 中分割一个系列
- c# - CS8804:如果存在具有顶级语句的编译单元,则无法指定 /main
- uml - 这个图可以代表一个迭代/集合中的每个吗?序列图还是活动图?
- c++ - Qt6 桌面应用程序和使用 cmake 的共享库
- flutter - 如何在颤动中悬停时更改 TextField?