webpack-dev-server核心概念案例详解

proxy: {
  '/api': {
    target: 'https://other-server.example.com',
    secure: false
  }
}
// In webpack.config.js
{
  devServer: {
    proxy: {
      '/api': {
        target: 'https://other-server.example.com',
        secure: false
      }
    }
  }
}
// Multiple entry
proxy: [
  {
    context: ['/api-v1/**', '/api-v2/**'],
    target: 'https://other-server.example.com',
    secure: false
  }
]

devServer: {
    port: 8000,
    proxy: {
      "/msg/show.htm": {
        target: "http://11.160.119.131/",
        secure: false
      }
    }
  }

devServer: {
    port: 8000,
    host:'localhost',
    proxy: {
      "/msg/show.htm": {
        target: "http://11.160.119.131/",
        secure: false
      }
    }
  }

  browser => localhost:8080(webpack-dev-server无代理) => http://you.test.com
  browser => localhost:8080(webpack-dev-server有代理) => http://you.test.com

devServer: {
    port: 8000,
    proxy: {
      "/msg/show.htm": {
        target: "http://youku.min.com/",
        secure: false
      }
    }
  }

proxy: {
  '/some/path': {
    target: 'https://other-server.example.com',
    secure: false,
    bypass: function(req, res, proxyOptions) {
      if (req.headers.accept.indexOf('html') !== -1) {
        console.log('Skipping proxy for browser request.');
        return '/index.html';
    }
  }
 }
}

proxy: {
  '/api': {
    target: 'https://other-server.example.com',
    pathRewrite: {'^/api' : ''}
  }
}

// output.publicPath: '/foo-app/'
historyApiFallback: {
  index: '/foo-app/'
}

historyApiFallback: {
    rewrites: [
        // shows views/landing.html as the landing page
        { from: /^\/$/, to: '/views/landing.html' },
        // shows views/subpage.html for all routes starting with /subpage
        { from: /^\/subpage/, to: '/views/subpage.html' },
        // shows views/404.html on all other pages
        { from: /./, to: '/views/404.html' },
    ],
},

if (parsedUrl.pathname.indexOf('.') !== -1 &&
        options.disableDotRule !== true) {
      logger(
        'Not rewriting',
        req.method,
        req.url,
        'because the path includes a dot (.) character.'
      );
      return next();
    }
    rewriteTarget = options.index || '/index.html';
    logger('Rewriting', req.method, req.url, 'to', rewriteTarget);
    req.url = rewriteTarget;
    next();
  };

history({
  disableDotRule: true
})

var server = new WebpackDevServer(compiler, {
  contentBase: "/path/to/directory",
  //content-base 配置 
  hot: true,
  //开启 HMR，由 webpack-dev-server 发送 "webpackHotUpdate" 消息到客户端代码
  historyApiFallback: false,
  //单页应用 404 转向 index.html
  compress: true,
  //开启资源的 gzip 压缩
  proxy: {
    "**": "http://localhost:9090"
  },
  //代理配置，来源于 http-proxy-middleware
  setup: function(app) {
     //webpack-dev-server 本身是 Express 服务器可以添加自己的路由
    // app.get('/some/path', function(req, res) {
    //   res.json({ custom: 'response' });
    // });
  },
  //为 Express 服务器的 express.static 方法配置参数 http://expressjs.com/en/4x/api.html#express.static
  staticOptions: {
  },
  //在 inline 模式下用于控制在浏览器中打印的 log 级别，如`error`, `warning`, `info` or `none`.
  clientLogLevel: "info",
  //不在控制台打印任何 log
  quiet: false,
  //不输出启动 log
  noInfo: false,
  //webpack 不监听文件的变化，每次请求来的时候重新编译
  lazy: true,
  //文件名称
  filename: "bundle.js",
  //webpack 的 watch 配置，每隔多少秒检查文件的变化
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  },
  //output.path 的虚拟路径映射
  publicPath: "/assets/",
  //设置自定义 http 头
  headers: { "X-Custom-Header": "yes" },
  //打包状态信息输出配置
  stats: { colors: true },
  //配置 https 需要的证书等
  https: {
    cert: fs.readFileSync("path-to-cert-file.pem"),
    key: fs.readFileSync("path-to-key-file.pem"),
    cacert: fs.readFileSync("path-to-cacert-file.pem")
  }
});
server.listen(8080, "localhost", function() {});
// server.close();

startWatch: function() {
      var options = context.options;
      var compiler = context.compiler;
      // start watching
      if(!options.lazy) {
        var watching = compiler.watch(options.watchOptions, share.handleCompilerCallback);
        context.watching = watching;
        //context.watching 得到原样返回的 Watching 对象
      } else {
       //如果是 lazy，表示我们不是 watching 监听，而是请求的时候才编译
        context.state = true;
      }
    }

rebuild: function rebuild() {
      //如果没有通过 compiler.done 产生过 Stats 对象，那么设置 forceRebuild 为 true
      //如果已经有 Stats 表明以前 build 过，那么调用 run 方法
      if(context.state) {
        context.state = false;
        //lazy 状态下 context.state 为 true，重新 rebuild
        context.compiler.run(share.handleCompilerCallback);
      } else {
        context.forceRebuild = true;
      }
    },

handleRequest: function(filename, processRequest, req) {
      // in lazy mode, rebuild on bundle request
      if(context.options.lazy && (!context.options.filename || context.options.filename.test(filename)))
        share.rebuild();
      //如果 filename 里面有 hash，那么通过 fs 从内存中读取文件名，同时回调就是直接发送消息到客户端!!!
      if(HASH_REGEXP.test(filename)) {
        try {
          if(context.fs.statSync(filename).isFile()) {
            processRequest();
            return;
          }
        } catch(e) {
        }
      }
      share.ready(processRequest, req);
      //回调函数将文件结果发送到客户端
    },

function processRequest() {
      try {
        var stat = context.fs.statSync(filename);
        //获取文件名
        if(!stat.isFile()) {
          if(stat.isDirectory()) {
            filename = pathJoin(filename, context.options.index || "index.html");
            //文件名
            stat = context.fs.statSync(filename);
            if(!stat.isFile()) throw "next";
          } else {
            throw "next";
          }
        }
      } catch(e) {
        return goNext();
      }
      // server content
      // 直接访问的是文件那么读取，如果是文件夹那么要访问文件夹
      var content = context.fs.readFileSync(filename);
      content = shared.handleRangeHeaders(content, req, res);
      res.setHeader("Access-Control-Allow-Origin", "*"); 
      // To support XHR, etc.
      res.setHeader("Content-Type", mime.lookup(filename) + "; charset=UTF-8");
      res.setHeader("Content-Length", content.length);
      if(context.options.headers) {
        for(var name in context.options.headers) {
          res.setHeader(name, context.options.headers[name]);
        }
      }
      // Express automatically sets the statusCode to 200, but not all servers do (Koa).
      res.statusCode = res.statusCode || 200;
      if(res.send) res.send(content);
      else res.end(content);
    }
  }