webpack dev server快速上手

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