xunleer / webpack-dev-server Goto Github PK

$ webpack-dev-server --content-base build/

module.exports = {
  entry: {
    app: ["./app/main.js"]
  },
  output: {
    path: path.resolve(__dirname, "build"),
    publicPath: "/assets/",
    //此时相当于/assets/路径对应于build目录，是一个映射的关系
    filename: "bundle.js"
  }
}

contentBaseFiles: function() {
      //如果contentBase是数组
      if(Array.isArray(contentBase)) {
        contentBase.forEach(function(item) {
          app.get("*", express.static(item));
        });
       //如果contentBase是https/http的路径，那么重定向
      } else if(/^(https?:)?\/\//.test(contentBase)) {
        console.log("Using a URL as contentBase is deprecated and will be removed in the next major version. Please use the proxy option instead.");
        console.log('proxy: {\n\t"*": "<your current contentBase configuration>"\n}'); // eslint-disable-line quotes
        // Redirect every request to contentBase
        app.get("*", function(req, res) {
          res.writeHead(302, {
            "Location": contentBase + req.path + (req._parsedUrl.search || "")
          });
          res.end();
        });
      } else if(typeof contentBase === "number") {
        console.log("Using a number as contentBase is deprecated and will be removed in the next major version. Please use the proxy option instead.");
        console.log('proxy: {\n\t"*": "//localhost:<your current contentBase configuration>"\n}'); // eslint-disable-line quotes
        // Redirect every request to the port contentBase
        app.get("*", function(req, res) {
          res.writeHead(302, {
            "Location": `//localhost:${contentBase}${req.path}${req._parsedUrl.search || ""}`
          });
          res.end();
        });
      } else {
        // route content request
        // http://www.expressjs.com.cn/starter/static-files.html
        // 把静态文件的目录传递给static那么以后就可以直接访问了
        app.get("*", express.static(contentBase, options.staticOptions));
      }
    }

  contentBaseIndex: function() {
      if(Array.isArray(contentBase)) {
        contentBase.forEach(function(item) {
          app.get("*", serveIndex(item));
          //The path is based off the req.url value, so a req.url of '/some/dir with a path of 'public' will look at 'public/some/dir'
          //其中这里的path表示我们的contentBase，所以我们的请求都是在contentBase下寻找
        });
      } else if(!/^(https?:)?\/\//.test(contentBase) && typeof contentBase !== "number") {
        app.get("*", serveIndex(contentBase));
      }
    }

http://localhost:8080/webpack-dev-server/index.html

  webpack-dev-server --inline --content-base ./build

entry: {
    app: [
     'webpack-dev-server/client?http://localhost:8080/',
     "./app/main.js"
    ]
  }

var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {...});
server.listen(8080);

function reloadApp() {
  if(hot) {
    log("info", "[WDS] App hot update...");
    window.postMessage("webpackHotUpdate" + currentHash, "*");
  } else {
    log("info", "[WDS] App updated. Reloading...");
    window.location.reload();
  }
}

if(!updatedModules) {
        console.warn("[HMR] Cannot find update. Need to do a full reload!");
        console.warn("[HMR] (Probably because of restarting the webpack-dev-server)");
        window.location.reload();
        return;
      }

if(options.inline) {
  var devClient = [require.resolve("../client/") + "?" + protocol + "://" + (options.public || (options.host + ":" + options.port))];
  //将webpack-dev-server的客户端入口添加到的bundle中，从而达到自动刷新
  if(options.hot)
    devClient.push("webpack/hot/dev-server");
    //这里是webpack-dev-server中对hot配置的处理
  [].concat(wpOpt).forEach(function(wpOpt) {
    if(typeof wpOpt.entry === "object" && !Array.isArray(wpOpt.entry)) {
      Object.keys(wpOpt.entry).forEach(function(key) {
        wpOpt.entry[key] = devClient.concat(wpOpt.entry[key]);
      });
    } else {
      wpOpt.entry = devClient.concat(wpOpt.entry);
    }
  });
}

var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/", "webpack/hot/dev-server");
//条件一(添加了webpack-dev-server的客户端和HMR的服务端)
var compiler = webpack(config);
var server = new webpackDevServer(compiler, {
  hot: true //条件二(--hot配置，webpack-dev-server会自动添加HotModuleReplacementPlugin),条件三
  ...
});
server.listen(8080);

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/",
        // 必须注意:这里要含有http://前缀
        secure: false
      }
    }
  }

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

11.160.119.131 youku.min.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' : ''}
  }
}

var server = new webpackDevServer(compiler, {
  quiet: false,
  stats: { colors: true },
  proxy: {
    "/api": {
      "target": {
        "host": "action-js.dev",
        "protocol": 'http:',
        "port": 80
      },
      ignorePath: true,
      changeOrigin: true,
      secure: false
    }
  }
});
server.listen(8080);

$ webpack-dev-server <entry>

var wpOpt = require("webpack/bin/convert-argv")(optimist, argv, {
  outputFilename: "/bundle.js"
});
if(options.inline) {
  var devClient = [require.resolve("../client/") + "?" + protocol + "://" + (options.public || (options.host + ":" + options.port))];
  if(options.hot)
    devClient.push("webpack/hot/dev-server");
    //添加webpack/hot/dev-server入口
  [].concat(wpOpt).forEach(function(wpOpt) {
    if(typeof wpOpt.entry === "object" && !Array.isArray(wpOpt.entry)) {
      Object.keys(wpOpt.entry).forEach(function(key) {
        wpOpt.entry[key] = devClient.concat(wpOpt.entry[key]);
      });
    } else {
      wpOpt.entry = devClient.concat(wpOpt.entry);
    }
  });
}

  if(options.lazy && !options.filename) {
    throw new Error("'filename' option must be set in lazy mode.");
  }

module.exports = {
  // ...
  devServer: {
    hot: true
  }
}

var WebpackDevServer = require("webpack-dev-server");
var webpack = require("webpack");
var fs = require("fs");

var compiler = webpack({
  // configuration
});
var server = new WebpackDevServer(compiler, {
  // webpack-dev-server options

  contentBase: "/path/to/directory",
  // Can also be an array, or: contentBase: "http://localhost/",

  hot: true,
  // Enable special support for Hot Module Replacement
  // Page is no longer updated, but a "webpackHotUpdate" message is sent to the content
  // Use "webpack/hot/dev-server" as additional module in your entry point
  // Note: this does _not_ add the `HotModuleReplacementPlugin` like the CLI option does. 

  historyApiFallback: false,
  // Set this as true if you want to access dev server from arbitrary url.
  // This is handy if you are using a html5 router.

  compress: true,
  // Set this if you want to enable gzip compression for assets

  proxy: {
    "**": "http://localhost:9090"
  },
  // Set this if you want webpack-dev-server to delegate a single path to an arbitrary server.
  // Use "**" to proxy all paths to the specified server.
  // This is useful if you want to get rid of 'http://localhost:8080/' in script[src],
  // and has many other use cases (see https://github.com/webpack/webpack-dev-server/pull/127 ).

  setup: function(app) {
    // Here you can access the Express app object and add your own custom middleware to it.
    // For example, to define custom handlers for some paths:
    // app.get('/some/path', function(req, res) {
    //   res.json({ custom: 'response' });
    // });
  },

  // pass [static options](http://expressjs.com/en/4x/api.html#express.static) to inner express server
  staticOptions: {
  },

  clientLogLevel: "info",
  // Control the console log messages shown in the browser when using inline mode. Can be `error`, `warning`, `info` or `none`.

  // webpack-dev-middleware options
  quiet: false,
  noInfo: false,
  lazy: true,
  filename: "bundle.js",
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000
  },
  // It's a required option.
  publicPath: "/assets/",
  headers: { "X-Custom-Header": "yes" },
  stats: { colors: true },

  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();

<script src="http://localhost:8080/webpack-dev-server.js"><\/script>

// 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
})

  //添加ProgressPlugin进度插件
    if(argv["progress"]) {
        compiler.apply(new webpack.ProgressPlugin({
            profile: argv["profile"]
        }));
    }

    "use strict";
   const url = require("url");
   //调用const domain = createDomain(devServerOptions);
   module.exports = function createDomain(options) {
       const protocol = options.https ? "https" : "http";
       // the formatted domain (url without path) of the webpack server
       // 返回protocol+options.public
       return options.public ? `${protocol}://${options.public}` : url.format({
           protocol: protocol,
           hostname: options.host,
           //如果没有配置那么通过host
           port: options.socket ? 0 : options.port.toString()
           //如果传入了socket那么port为0，否则为devServer配置的port
       });
   };
   const uri = createDomain(options) + (options.inline !== false || options.lazy === true ? "/" : "/webpack-dev-server/");
   //inline模式或者lazy模式url是"/"

webpack-dev-server  --public www.hello.com --open//此时会打开www.hello.com

    //用户在devServer中传入了socket
    if(options.socket) {
        //this.listeningApp一样
        server.listeningApp.on("error", function(e) {
            if(e.code === "EADDRINUSE") {
                //如果报错说服务器端口占用
                const clientSocket = new net.Socket();
                clientSocket.on("error", function(e) {
                    if(e.code === "ECONNREFUSED") {
                        // No other server listening on this socket so it can be safely removed
                        fs.unlinkSync(options.socket);
                        server.listen(options.socket, options.host, function(err) {
                            if(err) throw err;
                        });
                    }
                });
                clientSocket.connect({ path: options.socket }, function() {
                    throw new Error("This socket is already used");
                });
            }
        });
        //server调用listen方法，其中socket/host传入我们的自己的socket
        server.listen(options.socket, options.host, function(err) {
            if(err) throw err;
            const READ_WRITE = 438; // chmod 666 (rw rw rw)
            //看来我们传入的socket是一个文件
            fs.chmod(options.socket, READ_WRITE, function(err) {
                if(err) throw err;
                reportReadiness(uri, options);
            });
        });
    } else {
        //server.listen([port][, hostname][, backlog][, callback])
        server.listen(options.port, options.host, function(err) {
            if(err) throw err;
            reportReadiness(uri, options);
        });
    }
}

// delegate listen call and init sockjs
Server.prototype.listen = function() {
    const returnValue = this.listeningApp.listen.apply(this.listeningApp, arguments);
    const sockServer = sockjs.createServer({
        // Use provided up-to-date sockjs-client
        sockjs_url: "/__webpack_dev_server__/sockjs.bundle.js",
        // Limit useless logs
        log: function(severity, line) {
            if(severity === "error") {
                console.log(line);
            }
        }
    });
    //我们服务器端接受到connection时候触发
    sockServer.on("connection", function(conn) {
        if(!conn) return;
        this.sockets.push(conn);
        //我们this.sockets中放的是connection
        conn.on("close", function() {
            const connIndex = this.sockets.indexOf(conn);
            if(connIndex >= 0) {
                this.sockets.splice(connIndex, 1);
            }
        }.bind(this));
        //客户端断开那么从this.sockets中移除
        if(this.clientLogLevel)
            this.sockWrite([conn], "log-level", this.clientLogLevel);
         //this.clientLogLevel:Log level in the browser (info, warning, error or none)
        if(this.clientOverlay)
            this.sockWrite([conn], "overlay", this.clientOverlay);

        if(this.hot) this.sockWrite([conn], "hot");
         //向所有的客户端写入hot模式
        if(!this._stats) return;
        this._sendStats([conn], this._stats.toJson(clientStats), true);
    }.bind(this));
    
    //this.listeningApp是我们的服务器
    sockServer.installHandlers(this.listeningApp, {
        prefix: "/sockjs-node"
    });
    return returnValue;
}

    setup: function() {
            if(typeof options.setup === "function")
                options.setup(app, this);//传入我们的服务器和Server对象
        }.bind(this)

contentBaseFiles: function() {
            //如果contentBase是数组
            if(Array.isArray(contentBase)) {
                contentBase.forEach(function(item) {
                    app.get("*", express.static(item));
                });
             //如果contentBase是https/http的路径，那么重定向
            } else if(/^(https?:)?\/\//.test(contentBase)) {
                console.log("Using a URL as contentBase is deprecated and will be removed in the next major version. Please use the proxy option instead.");
                console.log('proxy: {\n\t"*": "<your current contentBase configuration>"\n}'); // eslint-disable-line quotes
                // Redirect every request to contentBase
                app.get("*", function(req, res) {
                    res.writeHead(302, {
                        "Location": contentBase + req.path + (req._parsedUrl.search || "")
                    });
                    res.end();
                });
            } else if(typeof contentBase === "number") {
                console.log("Using a number as contentBase is deprecated and will be removed in the next major version. Please use the proxy option instead.");
                console.log('proxy: {\n\t"*": "//localhost:<your current contentBase configuration>"\n}'); // eslint-disable-line quotes
                // Redirect every request to the port contentBase
                app.get("*", function(req, res) {
                    res.writeHead(302, {
                        "Location": `//localhost:${contentBase}${req.path}${req._parsedUrl.search || ""}`
                    });
                    res.end();
                });
            } else {
                // route content request
                // http://www.expressjs.com.cn/starter/static-files.html
                // 把静态文件的目录传递给static那么以后就可以直接访问了
                app.get("*", express.static(contentBase, options.staticOptions));
            }
        }

if(typeof options.stats === "object" && typeof options.stats.colors === "undefined")
        options.stats.colors = argv.color;
  //设置颜色
    if(!options.stats) {
    options.stats = {
        cached: false,
        cachedAssets: false
    };
}
//会传入到webpack中处理
if(e instanceof webpack.WebpackOptionsValidationError) {
            console.error(colorError(options.stats.colors, e.message));
            process.exit(1); // eslint-disable-line
        }

      watchContentBase: function() {
            //如果contentBase有http或者https开头，或者contentBase为number类型那么抛出错误
            if(/^(https?:)?\/\//.test(contentBase) || typeof contentBase === "number") {
                throw new Error("Watching remote files is not supported.");
            } else if(Array.isArray(contentBase)) {
                //如果contentBase是一个数组，那么监听这个数组的所有文件
                contentBase.forEach(function(item) {
                    this._watch(item);
                }.bind(this));
            } else {
                //否则仅仅监听一个文件
                this._watch(contentBase);
            }
        }.bind(this),

    Server.prototype._watch = function(path) {
    const watcher = chokidar.watch(path).on("change", function() {
        this.sockWrite(this.sockets, "content-changed");
    }.bind(this))
    //通知client端文件变化，每次文件变化都会返回一个watcher对象
    this.contentBaseWatchers.push(watcher);
}

    //客户端检测到服务器端有更新,通过chokidar检测到文件的变化
    "content-changed": function() {
        log("info", "[WDS] Content base changed. Reloading...")
        self.location.reload();
    }

var SockJS = require("sockjs-client");
var retries = 0;
var sock = null;
//socket(socketUrl, onSocketMsg);
function socket(url, handlers) {
  sock = new SockJS(url);
  sock.onopen = function() {
    retries = 0;
  }
  sock.onclose = function() {
    if(retries === 0)
      handlers.close();
         //如果该socket已经被关闭，那么调用close
    // Try to reconnect.
    sock = null;
    // After 10 retries stop trying, to prevent logspam.
    if(retries <= 10) {
      // Exponentially increase timeout to reconnect.
      // Respectfully copied from the package `got`.
      var retryInMs = 1000 * Math.pow(2, retries) + Math.random() * 100;
      retries += 1;
      setTimeout(function() {
        socket(url, handlers);
      }, retryInMs);
    }
  };
  sock.onmessage = function(e) {
    // This assumes that all data sent via the websocket is JSON.
    // 所有websocket传来到client端的都是json
    var msg = JSON.parse(e.data);
    if(handlers[msg.type])
      handlers[msg.type](msg.data);
  };
}
module.exports = socket;

/* global __resourceQuery */
var url = require("url");
var stripAnsi = require("strip-ansi");
var socket = require("./socket");
var overlay = require("./overlay");
//创建了一个html的iframe元素了
function getCurrentScriptSource() {
  // `document.currentScript` is the most accurate way to find the current script,
  // but is not supported in all browsers.
  // 返回脚本正在被执行的script,如websocket脚本
  if(document.currentScript)
    return document.currentScript.getAttribute("src");
  // Fall back to getting all scripts in the document.
  var scriptElements = document.scripts || [];
  var currentScript = scriptElements[scriptElements.length - 1];
  if(currentScript)
    return currentScript.getAttribute("src");
  // Fail as there was no script to use.
  throw new Error("[WDS] Failed to get current script source");
}

var urlParts;
//我们在addDevEntryPoint中有如此的配置
//const devClient = [`${require.resolve("../../client/")}?${domain}`];
//我们在打包文件中添加的是如下的形式：config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
//此时我们的__resourceQuery就是http://localhost:8080/
if(typeof __resourceQuery === "string" && __resourceQuery) {
  // If this bundle is inlined, use the resource query to get the correct url.
  // 如果这个打包后的文件是内联的，那么我们使用resource query来获取正确的url
  urlParts = url.parse(__resourceQuery.substr(1));
} else {
  // Else, get the url from the <script> this file was called with.
  var scriptHost = getCurrentScriptSource();
  scriptHost = scriptHost.replace(/\/[^\/]+$/, "");
  //如果是"/hello/"原样不变，如果是"/hello"那么返回""
  urlParts = url.parse((scriptHost ? scriptHost : "/"), false, true);
}

var hot = false;
var initial = true;
var currentHash = "";
//当前编译的hash
var logLevel = "info";
//默认info级别
var useWarningOverlay = false;
var useErrorOverlay = false;

// 打印log类型
function log(level, msg) {
  if(logLevel === "info" && level === "info")
    return console.log(msg);
  if(["info", "warning"].indexOf(logLevel) >= 0 && level === "warning")
    return console.warn(msg);
  if(["info", "warning", "error"].indexOf(logLevel) >= 0 && level === "error")
    return console.error(msg);
}

// Send messages to the outside, so plugins can consume it.
// 其中self用于在iframe中完成
function sendMsg(type, data) {
  if(typeof self !== "undefined" && self.window) {
    self.postMessage({
      type: "webpack" + type,
      data: data
    }, "*");
  }
}
/*
var msg = JSON.parse(e.data);
    if(handlers[msg.type])
      handlers[msg.type](msg.data);
 */
var onSocketMsg = {
  //设置hot为true
  hot: function() {
    hot = true;
    log("info", "[WDS] Hot Module Replacement enabled.");
  },
  //打印invalid
  invalid: function() {
    log("info", "[WDS] App updated. Recompiling...");
    sendMsg("Invalid");
  },
  //设置hash
  hash: function(hash) {
    currentHash = hash;
  },
  //继续可用
  "still-ok": function() {
    log("info", "[WDS] Nothing changed.")
    if(useWarningOverlay || useErrorOverlay) overlay.clear();
    sendMsg("StillOk");
  },
  //设置log级别
  "log-level": function(level) {
    logLevel = level;
  },
  /*
  Shows a full-screen overlay in the browser when there are compiler errors or warnings.
  Disabled by default. If you want to show only compiler errors:
  overlay: true
  If you want to show warnings as well as errors:
  overlay: {
    warnings: true,
    errors: true
  }
   */
  "overlay": function(overlay) {
    if(typeof document !== "undefined") {
      if(typeof(overlay) === "boolean") {
        useWarningOverlay = overlay;
        useErrorOverlay = overlay;
      } else if(overlay) {
        useWarningOverlay = overlay.warnings;
        useErrorOverlay = overlay.errors;
      }
    }
  },
  //ok
  ok: function() {
    sendMsg("Ok");
    if(useWarningOverlay || useErrorOverlay) overlay.clear();
    if(initial) return initial = false;
    reloadApp();
  },
  //这里表示conentBase下静态资源变化了那么我们必须reload，因为不再是js更新了
  "content-changed": function() {
    log("info", "[WDS] Content base changed. Reloading...")
    self.location.reload();
  },
  warnings: function(warnings) {
    log("info", "[WDS] Warnings while compiling.");
    var strippedWarnings = warnings.map(function(warning) {
      return stripAnsi(warning);
    });
    sendMsg("Warnings", strippedWarnings);
    for(var i = 0; i < strippedWarnings.length; i++)
      console.warn(strippedWarnings[i]);
    if(useWarningOverlay) overlay.showMessage(warnings);

    if(initial) return initial = false;
    reloadApp();
  },
  errors: function(errors) {
    log("info", "[WDS] Errors while compiling. Reload prevented.");
    var strippedErrors = errors.map(function(error) {
      return stripAnsi(error);
    });
    sendMsg("Errors", strippedErrors);
    for(var i = 0; i < strippedErrors.length; i++)
      console.error(strippedErrors[i]);
    if(useErrorOverlay) overlay.showMessage(errors);
  },
  //发送消息close
  close: function() {
    log("error", "[WDS] Disconnected!");
    sendMsg("Close");
  }
};

var hostname = urlParts.hostname;
//不包含端口号
var protocol = urlParts.protocol;
//协议
//check ipv4 and ipv6 `all hostname`
if(hostname === "0.0.0.0" || hostname === "::") {
  // why do we need this check?
  // hostname n/a for file protocol (example, when using electron, ionic)
  // see: https://github.com/webpack/webpack-dev-server/pull/384
  // 如果是http协议，那么hostname为location.hostname
  if(self.location.hostname && !!~self.location.protocol.indexOf("http")) {
    hostname = self.location.hostname;
  }
}

// `hostname` can be empty when the script path is relative. In that case, specifying
// a protocol would result in an invalid URL.
// When https is used in the app, secure websockets are always necessary
// because the browser doesn't accept non-secure websockets.
// 如果服务器使用https，那么浏览器必须使用https
if(hostname && (self.location.protocol === "https:" || urlParts.hostname === "0.0.0.0")) {
  protocol = self.location.protocol;
}

//得到字符串http://example.com:8080/one?a=index&t=article&m=default
var socketUrl = url.format({
  protocol: protocol,
  auth: urlParts.auth,
  //Basic认证，这个值被计算成Authorization字段。如果request可以获取那么直接发送到服务器
  hostname: hostname,
  port: (urlParts.port === "0") ? self.location.port : urlParts.port,
  pathname: urlParts.path == null || urlParts.path === "/" ? "/sockjs-node" : urlParts.path
  //这里必须和服务器的/sockjs-node一致才能接受服务器传送的消息,服务器的prefix为'/sockjs-node'
  //因为我们一般会传入localhost:8080而不会传入path，如果要传入path那么也必须是同名的!!!!!
});

socket(socketUrl, onSocketMsg);
function reloadApp() {
  //如果开启了HMR模式
  if(hot) {
    log("info", "[WDS] App hot update...");
    var hotEmitter = require("webpack/hot/emitter");
    hotEmitter.emit("webpackHotUpdate", currentHash);
    //重新启动webpack/hot/emitter，同时设置当前hash
    if(typeof self !== "undefined" && self.window) {
      // broadcast update to window
      self.postMessage("webpackHotUpdate" + currentHash, "*");
    }
  } else {
     //如果不是Hotupdate那么我们直接reload我们的window就可以了
    log("info", "[WDS] App updated. Reloading...");
    self.location.reload();
  }
}

function reloadApp() {
  //如果开启了HMR模式
  if(hot) {
    log("info", "[WDS] App hot update...");
    var hotEmitter = require("webpack/hot/emitter");
    hotEmitter.emit("webpackHotUpdate", currentHash);
    //重新启动webpack/hot/emitter，同时设置当前hash
    if(typeof self !== "undefined" && self.window) {
      // broadcast update to window
      self.postMessage("webpackHotUpdate" + currentHash, "*");
    }
  } else {
     //如果不是Hotupdate那么我们直接reload我们的window就可以了
    log("info", "[WDS] App updated. Reloading...");
    self.location.reload();
  }
}

/*
  MIT License http://www.opensource.org/licenses/mit-license.php
  Author Tobias Koppers @sokra
*/
/*globals window __webpack_hash__ */
if(module.hot) {
  var lastHash;
  //__webpack_hash__是每次编译的hash值是全局的
  //Only available with the HotModuleReplacementPlugin or the ExtendedAPIPlugin
  var upToDate = function upToDate() {
    return lastHash.indexOf(__webpack_hash__) >= 0;
  };
  var check = function check() {
    module.hot.check(true).then(function(updatedModules) {
      //更新的模块
      if(!updatedModules) {
        console.warn("[HMR] Cannot find update. Need to do a full reload!");
        console.warn("[HMR] (Probably because of restarting the webpack-dev-server)");
        window.location.reload();
        return;
      }
            //如果还有更新
      if(!upToDate()) {
        check();
      }
      require("./log-apply-result")(updatedModules, updatedModules);
      if(upToDate()) {
        console.log("[HMR] App is up to date.");
      }
    }).catch(function(err) {
      var status = module.hot.status();
      //如果报错直接全局reload
      if(["abort", "fail"].indexOf(status) >= 0) {
        console.warn("[HMR] Cannot apply update. Need to do a full reload!");
        console.warn("[HMR] " + err.stack || err.message);
        window.location.reload();
      } else {
        console.warn("[HMR] Update failed: " + err.stack || err.message);
      }
    });
  };
  var hotEmitter = require("./emitter");
  //获取MyEmitter对象
  hotEmitter.on("webpackHotUpdate", function(currentHash) {
    lastHash = currentHash;
    if(!upToDate() && module.hot.status() === "idle") {
      //调用module.hot.status方法获取状态
      console.log("[HMR] Checking for updates on the server...");
      check();
    }
  });
  console.log("[HMR] Waiting for update signal from WDS...");
} else {
  throw new Error("[HMR] Hot Module Replacement is disabled.");
}

"use strict";
const createDomain = require("./createDomain");
//其中devServerOptions是要传递给devServer的，而webpackOptions是所有的yarg接受到的参数，包含了webpack中配置的devServer选项
module.exports = function addDevServerEntrypoints(webpackOptions, devServerOptions) {
  if(devServerOptions.inline !== false) {
    //表示是inline模式而不是iframe模式
    const domain = createDomain(devServerOptions);
    const devClient = [`${require.resolve("../../client/")}?${domain}`];
    //客户端内容
    if(devServerOptions.hotOnly)
      devClient.push("webpack/hot/only-dev-server");
    else if(devServerOptions.hot)
      devClient.push("webpack/hot/dev-server");
      //配置了不同的webpack而文件到客户端文件中
    [].concat(webpackOptions).forEach(function(wpOpt) {
      if(typeof wpOpt.entry === "object" && !Array.isArray(wpOpt.entry)) {
        /*
          entry:{
                  index:'./index.js',
                  index1:'./index1.js'
          }
         */
        Object.keys(wpOpt.entry).forEach(function(key) {
          wpOpt.entry[key] = devClient.concat(wpOpt.entry[key]);
        });
        //添加我们自己的入口文件
      } else if(typeof wpOpt.entry === "function") {
        wpOpt.entry = wpOpt.entry(devClient);
        //如果entry是一个函数那么我们把devClient数组传入
      } else {
        wpOpt.entry = devClient.concat(wpOpt.entry);
        //数组直接传入
      }
    });
  }
};

/*
  MIT License http://www.opensource.org/licenses/mit-license.php
  Author Tobias Koppers @sokra
*/
/*globals __webpack_hash__ */
if(module.hot) {
  var lastHash;
  var upToDate = function upToDate() {
    return lastHash.indexOf(__webpack_hash__) >= 0;
  };
  //检查更新
  var check = function check() {
    //check方法：Check all currently loaded modules for updates and apply updates if found.
    module.hot.check().then(function(updatedModules) {
      //没有更新的模块直接返回
      if(!updatedModules) {
        console.warn("[HMR] Cannot find update. Need to do a full reload!");
        console.warn("[HMR] (Probably because of restarting the webpack-dev-server)");
        return;
      }
            //apply方法:If status() != "ready" it throws an error.
      return module.hot.apply({
        ignoreUnaccepted: true,
        ignoreDeclined: true,
        ignoreErrored: true,
        onUnaccepted: function(data) {
          console.warn("Ignored an update to unaccepted module " + data.chain.join(" -> "));
        },
        onDeclined: function(data) {
          console.warn("Ignored an update to declined module " + data.chain.join(" -> "));
        },
        onErrored: function(data) {
          console.warn("Ignored an error while updating module " + data.moduleId + " (" + data.type + ")");
        }
      }).then(function(renewedModules) {
        if(!upToDate()) {
          check();
        }
                //更新的模块updatedModules和renewedModules模块
        require("./log-apply-result")(updatedModules, renewedModules);

        if(upToDate()) {
          console.log("[HMR] App is up to date.");
        }
      });
    }).catch(function(err) {
      var status = module.hot.status();
      if(["abort", "fail"].indexOf(status) >= 0) {
        console.warn("[HMR] Cannot check for update. Need to do a full reload!");
        console.warn("[HMR] " + err.stack || err.message);
      } else {
        console.warn("[HMR] Update check failed: " + err.stack || err.message);
      }
    });
  };
  var hotEmitter = require("./emitter");
  hotEmitter.on("webpackHotUpdate", function(currentHash) {
    lastHash = currentHash;
    if(!upToDate()) {
      //有更新
      var status = module.hot.status();
      if(status === "idle") {
        console.log("[HMR] Checking for updates on the server...");
        check();
      } else if(["abort", "fail"].indexOf(status) >= 0) {
        console.warn("[HMR] Cannot apply update as a previous update " + status + "ed. Need to do a full reload!");
      }
    }
  });
  console.log("[HMR] Waiting for update signal from WDS...");
} else {
  throw new Error("[HMR] Hot Module Replacement is disabled.");
}