webpack搭建本地服务器

webpack提供了一个可选的本地开发服务器，基于node.js搭建，内部使用express框架，让浏览器自动刷新修改后的结果。

安装

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

我学习用的webpack版本为3.6.0，所以相对应的本地服务器版本需要使用2.9.1版本


然后在webpack.config.js中配置如下内容

module.exports = {
  ...
  devServer:{
    contentBase: "./dist",    //为那个文件夹提供服务，默认是根文件夹，我这里是./dist
    inline: true,    //页面实时刷新
    port: 8888    //端口
  }
}

如何运行呢？

在package.json里配置：

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

配置完后，就可以在命令行使用如下命令开启本地服务器

npm run dev

开启成功后，命令行会显示本地服务器地址：

本地服务器开启成功

效果展示

如果想要终止服务器，可以按CTRL+C，然后输入y就可以停止。