webpack dev server

一个webpack官方服务器

webpack dev server能够做什么?

• live reloading 触发浏览器自动刷新，当项目文件发生改变会被识别
• 路径重定向
• 支持https
• 支持在浏览器显示实时编译错误
• 接口代理（本地开发环境请求集成、测试环境接口）
• 模块热更新

常见配置

官方配置入口

• devServer

  inline false会开启打包状态栏

• contentBase 提供内容路径

• port 端口

• historyApiFallback: true // 所以404页面都会重定向当前路由，或者更高级配置如下 pages/a指向pages/a.html

  historyApiFallback: {
  rewrites: [{
  from: 'pages/a'
  to: 'pages/a.html'
  }, {
  from: /^\/([a-zA-Z0-9]+\/?)([a-zA-Z0-9]+)/,
  to: function (context) {
  return '/' + content.match[1] + context.match[2] + '.html'
  }
  }]
  }

• https 默认情况下，dev-server将通过HTTP提供，开启后可以提供https，可以使用自己的证书

• hot 开启模块热更新

• openpage 访问初始界面

• lazy 懒加载模式

• overlay 遮罩，在打开页面给出错误

• compress 提供gizp压缩

• headers 添加响应头

使用

1. 安装webpack-dev-server

   npm install --save-dev webpack-dev-server

2. webpack.config.js内配置devServer,不需要require该模块

   output: {
   },
   devServer: {
   port: 3030,
   historyApiFallback: true // 任何路径都会重定向当前url不会报404，false则会
   },
   module: {
   …
   }

3. 命令行运行命令

   // 方式1
   node_modules/.bin/webpack-dev-server --open
   
   // 方式2
   在package文件配置
   "script": {
   "start": "webpack-dev-server --open"
   }
   
   然后运行 npm run start