使用webpack构建本地服务器,实现自动刷新，并直接在手机上访问

前提

使用webpack构建前端开发环境，可以直接使用webpack构建本地服务，实现页面保存自动刷新。

模块安装

首先安装webpack-dev-server模块

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

安装完成后然后修改webpack.config.js文件，在里面添加

module.exports = {
    devtool: 'source-map', //调试配置，生成source maps
    entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
    output: {
        path: __dirname + "/public",//打包后的文件存放的地方
        filename: "js/index.js"//打包后输出文件的文件名
    },

    //以下是服务环境配置
    devServer: {
        contentBase: "./public",//本地服务器所加载的页面所在的目录
        historyApiFallback: true,//不跳转
        inline: true, //实时刷新
        host: "192.168.0.232", //本机的局域网ip
        open: true //是否运行成功后直接打开页面
    }
}

最后，在package.json里面添加

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

直接当前目录打开cmd，运行npm run server就可以看到当前页面，而且还可以刷新

相关配置

配置选项	功能描述
contentBase	默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public”目录）
host	设置监听的ip地址，可以在cmd的ipconfig内查看，设置后可以在局域网内任何设备访问
port	设置默认监听端口，如果省略，默认为”8080”
inline	设置为true，当源文件改变时会自动刷新页面
historyApiFallback	在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html

更多功能请看官网这里