三十二、webpack-dev-server搭建本地服务器

1. webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js搭建,内部使用express框架,可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。

2. 不过它是一个单独的模块,在webpack中使用之前需要先安装它

　　npm install --save-dev webpack-dev-server@2.9.1

3. devserver也是作为webpack中的一个选项,选项本身可以设置如下属性:

• contentBase :为哪一个文件夹提供本地服务,默认是根文件夹,我们这里要填写./dist
• port:端口号
• inline :页面实时刷新
• historyApiFallback :在SPA页面中,依赖HTML5的history模式 

4. webpack.config.js文件配置修改如下

?

1 2 3 4

devServer: {   contentBase: './dist',   inline: true },

5. 可以再配置另外一个scripts：

　　--open参数表示直接打开浏览器

?

1	"dev": "webpack-dev-server --open"