webpack搭建本地服务器

 webpack搭建本地服务器

 

webpack提供了一个可选的本地开发服务器，这个本地服务器基于node.js搭建，内部使用了express框架，可以实现热启动。

 

> 准备工作复制05-webpack的plugin文件夹到同级目录，并改名为06-webpack搭建本地服务器。

 

不过这是一个单独的模块，在webpack中使用之前需要先安装：

 

```shell

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

```

 

devServe也是webpack中一个选项，选项本省可以设置一些属性：

 

- contentBase：为哪个文件夹提供本地服务，默认是根文件夹，这里我们需要改成./dist

- port：端口号

- inline：页面实时刷新

- historyApiFallback：在SPA（单页面富应用）页面中，依赖HTML5的history模式

 

修改webpack.config.js的文件配置

 

```javascript

//2.配置webpack的入口和出口

module.exports = {

 ...

  devServer: {

    contentBase: './dist',//服务的文件夹

    port: 4000,

    inline: true//是否实时刷新

  }

 

}

 

```

 

配置package.json的script：

 

```json

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

```

 

> --open表示直接打开浏览器

 

启动服务器

 

```shell

npm run dev

```

 

启动成功，自动打开浏览器，发现在本地指定端口启动了，此时你修改src文件内容，**会热修改。**

 

> 1.服务器启动在内存中。

> 2.开发调试时候最好不要使用压缩js文件的插件，不易调试。