webpack学习

webpack-dev-server参数配置

2020-11-26  本文已影响0人  修齐治平zzr
自从学习了node.js 的http 模块,我们就能想到 webpack-dev-server实质上是启动了web一个服务器,为webpack打包的资源提供服务。

1.帮我们启动一个web服务
2.帮我们实现界面的局部更新

安装webpack-dev-server
npm install webpack-dev-server -D 

以下是webpack-dev-server的一些参数说明

devServer: {
  // 运行代码的目录
  contentBase: resolve(__dirname, 'build'),
  watchContentBase: true, // 监视contentBase目录下的所有文件,一旦文件变化,就会reload
  watchOptions: {
    ignored: /node_modules/
  }
  // 启动gzip压缩
  compress: true,
  port: 8080, // 端口号
  host: 'localhost', // 域名
  open: true, // 自动打开浏览器
  hot: true, // 开启HMR功能
  clientLogLevel: 'none', // 不用显示启动服务器的日志信息
  quiet: true, // 除了一些基本启动信息意外,其他内容都不要显示
  overlay: false, // 如果出错了,不要全屏提示
  proxy: {
      // 一旦devServer服务器接收到/api/xxx的请求,就会把请求转发到另一个服务器(http://localhost:8080)
      '/api': {
      target: 'http://localhost:3000',
        pathRewrite: {
          '^/api': '' // 发送请求时,请求路径重写 把 /api/xxx ---> /xxx
       }
    }
  }, // 服务器代理 --> 解决开发环境跨域问题 
}
上一篇 下一篇

猜你喜欢

热点阅读