如何使用新的 Webpack devServer 配置?
How to use the new Webpack devServer configuration?
将项目的 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? }
变更日志似乎没有更新,我只发现了几个新选项:More info here
如何将这个“旧”配置文件转换为新配置文件?
如果可能的话,我在哪里可以找到新的配置选项?
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
将项目的 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? }
变更日志似乎没有更新,我只发现了几个新选项:More info here
如何将这个“旧”配置文件转换为新配置文件?
如果可能的话,我在哪里可以找到新的配置选项?
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