在前端项目中，通过webpack搭建手机可以远程访问的服务器

问题背景

在前端单页应用的开发过程中，除了在PC端Chrome浏览器中调试，还希望通过手机访问网页，查看在真机上的显示效果。

---

解决方案

webpack & webpack-dev-server

---

操作步骤

1. 安装

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

考虑到特殊国情，也可以使用

cnpm install --save-dev webpack-dev-server

2. 配置webpack.config.js，告诉服务器在哪里查找文件：

devServer: {
    contentBase: './dist'
}

3. 配置package.json，添加一个script脚本：

"start": "webpack-dev-server --host 0.0.0.0",

4. 最后打开手机浏览器，访问地址“http://your_pc_address:8080”。

---

注意事项

PC和手机需要在同一局域网内。

---

小结

万能的webpack！webpack本质上一个模块化解决方案，不过旗下丰富的插件也可以实现其他功能。