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

一、webpack提供的本地服务

在开发阶段，可以指定本地服务器管理最后要发布的dist文件，将dist文件存放在内存中，每次修改代码想要查看效果时，不需要使用npm run webpack的命令，本地服务器会将变化动态的映射到浏览器中，浏览器会自动刷新，显示修改后的结构，最后开发完成时，使用一次npm run build打包发布dist文件。

二、使用本地服务器

1.安装webpack-dev-server

npm install webpack-dev-server@(指定版本) --save-dev

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

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

3.简化指定命令
在package.json的script中添加webpack-dev-server的简化指令
--open自动打开生成的本地服务器的地址

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  }

4.执行npm run dev
生成默认地址：http://localhost:8080/

image.png