wepack学习三 配置本地服务器以及实时刷新

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

1.利用webpack搭建本地服务器，在前面的代码基础上继续学习
首先安装模块webpack-dev-server

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

2.修改配置文件webpack.json

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

3.修改配置文件webpack.config.js，设置文件内修改保存即及时刷新

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

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

}

此处不加 – mode development会出现黄色报错

此时在终端命令行执行npm run server即可执行功能，生成bundle.js