使用webpack构建本地服务器

　　想不想让你的浏览器监听你的代码的修改，并自动刷新显示修改后的结果，其实Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖。

　　1、安装webpack-dev-server

 　　配置好后执行 webpack-dev-server，这时候会报错。需要在package.json加上服务器信息。

　　2、在package.json中的scripts对象中添加如下命令，用以开启本地服务器

"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack", "server": "webpack-dev-server --open" },

　　3、下载好之后需要在webpack.config.js里面配置下devServer

const path = require('path'); module.exports={ //入口文件的配置项
 entry:{ entry:'./src/index.js' }, //出口文件的配置项
 output:{ //输出的路径，用了Node语法
        path:path.resolve(__dirname,'dist'), //输出的文件名称
        filename:'bundle.js' }, mode:"development", //模块：例如解读CSS,图片如何转换，压缩
 module:{}, //插件，用于生产模版和各项功能
 plugins:[], //配置webpack开发服务功能
 devServer:{ contentBase:path.resolve(__dirname,'dist'),//本地服务器所加载的页面所在的目录
        host:'192.168.118.221', compress:true, port:8081 }// 配置webpack服务
}

　　host是你自己的ip地址，port是端口号

　　devserver作为webpack配置选项中的一项，以下是它的一些配置选项

devServer: { contentBase: "./public",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    inline: true//实时刷新
  } 

　　4、配置好后，在终端执行npm run server，发现还是会报错。如下图所示，webpack-cli没有安装

　　5、安装webpack-cli：

　　注意：需要全局和局部都安装。先npm install webpack-cli -g，再npm install webpack-cli -D，否则的话，依然会报上面的错误。

　　6、执行npm run server

　　执行成功