webpack搭建本地服务器

文章目录

• ​​1 介绍​​
• ​​2 安装​​
• ​​3 启动​​

1 介绍

• 基于node.js搭建，内部使用express框架，可以实现我们想要的让浏览器自动刷新显示我们修改后的结果。
• deserver也是作为webpack中的一个选项，选项本身可以设置如下属性

（1）contentBase：为哪一个文件夹提供本地服务，默认是跟文件夹，我们这里可以填写​​./dist​​

（2）port：端口号

（3）inline：页面实时刷新

（4）historyApiFallback：在SPA页面中，依赖HTML5的history模式

2 安装

# 安装，提供一个开发时服务
npm install webpack-dev-server@2.9.3 --save-dev

webpack.config.js

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

3 启动

# 初始命令
.\node_modules\.bin/webpack-dev-server

# 脚本化（package.json中的scripts设置）
"dev":"webpack-dev-server --open"