使用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:
    }//  配置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

　　执行成功