webpack-dev-server搭建本地服务器

配置方法：

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用express框架，可以为我们的某个文件夹提供本地服务，达到让浏览器自动刷新显示我们代码修改后的结果。

该模块安装方式：

npm install --save-dev webpack-dev-server@2.9.1   //版本号根据需要自己选择

devserver也是作为webpack中的一个选项，可设置如下属性：

a.  contentBase: 为哪个文件夹提供服务。

b.  port：端口号

c.  inline：页面是否实时刷新

d.  historyApiFallback: 在SPA页面中，依赖HTML5的history模式。

webpack.config.js配置：

 

给命令起别名（后面加上--open可以直接打开浏览器）：

 

主要就是：express框架监察代码内容变化，生成相应编译文件存在内存中（打包的是在磁盘）。

开发与生产的配置文件分离：

新建一个build文件夹，新建三个文件：

base.config.js //公共依赖配置

dev.config.js //开发依赖

prod.config.js //生产依赖

然后安装一个webpack-merge模块，可以将两个配置文件合并，在开发配置中引入公共配置，再添加我们开发环境所需依赖即可，在生产配置中，我们可以引入公共配置再加生产环境所需配置，设置方式同脚手架生成的：

 

分离之后，package.json文件中的别名脚本命令build和dev也就要修改了，更换配置之后的路径：

"build": "webpack --config ./build/prod.config.js", "dev": "webpack-dev-server --open --config ./build/dev.config.js"

已经生成打包文件的拼接路径也要修改：

 

改为："../dist"