使用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//实时刷新    }}

最后，在package.json里面添加

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

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

相关配置

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

更多功能请看官网这里