要配置DevServer,除了在配置文件里通过devServer传入参数外,还可以通过命令行参数传入。注意只有在通过DevServer去启动webpack时配置文件里devServer才会生效,因为这些参数所对应的功能都是DevServer提供的,webpack本身并不认识devServer配置项。
hot
devServer.hot【是否启用模块热替换功能】
DevServer默认的行为是在发现源代码被更新后会通过自动刷新整个页面来做到实时预览,开启模块热替换功能后将在不刷新整个页面的情况下通过用新模块替换老模块来做到实时预览。
historyApiFallback
devServer.historyApiFallback 用于方便的开发使用了HTML5 History API的单页应用。这类单页应用要求服务器在针对任何命中的路由时都返回一个对应的HTML文件。
配置historyApiFallback最简单的做法是:
devServer: {historyApiFallback: true // 任何请求都会返回index.html},
contentBase
devServer.contentBase 配置DevServer HTTP服务器的文件根目录。默认为项目根目录。
devServer: {
contentBase: './dist',
},
port
devServer.port 配置项用于配置DevServer服务监听的端口,默认使用8080端口。
devServer: {
port: 8080,
},
compress
devServer.compress 配置是否启用gzip压缩。
devServer: {
compress: true,
},
