[webpack-plugin] webpack-dev-server&HMR

当你使用 webpack 打包你的项目代码时，如果你不希望每次都运行 npm run build 然后再刷新网页来浏览你新代码的运行效果，而是想每次修改完客户端代码就能立刻查看新代码效果，那么你需要使用 webpack 热替换（hot module replacement）功能。在此之前你需要安装一个插件来帮你启动一个小型 web 服务器，以响应此功能。

1.安装 webpack-dev-server

npm i -D webpack-dev-server

2.配置 webpack.config.js

//webpack.config.js

//输出配置
module.exports = {
    entry:...,
    output: ...,
    devServer: {
        contentBase: path.join(__dirname, "dist"),
        // hot:true,            //默认值为 true，所以可以不用设置
        port: 9000
    }
};

3.package.json "scripts"中添加一行命令

{
  "scripts":{
    "start": "webpack-dev-server --open"
  }
}

至此你可以通过命令行指令

npm start

以启动你的服务器并调试代码。

更多功能请参考
github webpack-dev-server
HMR webpack 中文文档
HMR webpack 官方文档

---

作者水平有限，如有错误，欢迎指正交流。

---