这章,跟大家一起学习webpack-dev-server的配置
一、安装webpack-dev-servercnpm i webpack-dev-server -D
webpack.config.js配置如下
// 开发服务器 devServer: 用来自动化(自动编译,自动打开浏览器,自动刷新浏览器)
// 特点:只会在内存中编译打包,不会有任何输出
devServer: {
// 运行代码的目录
contentBase: resolve(__dirname, 'build'),
// 监视contentBase下的所有文件,一旦文件变化就会reload
watchContentBase: true,
watchOptions: {
ignore: /node_modules/ // 忽略监视此文件
},
// 启动gzip压缩
compress: true,
port: '8099',
inline: true, // 文件修改后实时刷新
historyApiFallback: true, // 不跳转
open: true, // 自动打开浏览器
clientLogLevel: 'none', // 不要显示启动服务器日志信息
quiet: true, // 除了显示启动信息外,其他内容不显示
overlay: false, // 如果出现错误,不要全屏提示
proxy: { // 服务器代理--解决开发环境跨域问题
'/api': {
// 一旦devServer(5000)服务器收到api/xxx的请求,就会把请求转发到另一个服务器(3000)
target: 'http:localhost:3000',
// 发送请求时,请求路径重写,将/api/xxx --> /xxx(去掉api)
pathRewrite: {
'^/api': ''
}
}
}
}
终端命令行输入npx webpack-dev-server -D 启动服务 // 内存中编译打包,没有输出
如图1.1所示
下一章为大家讲解webpack关于生产环境相关的配置
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。