webpack配置本地服务器(webpack-dev-server)

本地服务器搭建

实现页面自动刷新显示修改后的效果。

1. 安装webpack-dev-server

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

  • 版本号最好是和webpack的版本对应（这里是vue-cli3使用的版本）

2. 配置webpack.config.js

  • contentBase——为哪个文件夹提供本地服务（默认是根目录）
  • inline——是否实时刷新
  • port——端口，默认8080
  • historyApiFallback——在sap页面中的html5的history模式
module.exports = {
  devServer: {
    contentBase: '/dist',  //为哪个文件夹提供本地服务（默认是根目录）
    inline: true, //是否实时刷新
    port: 8080, //端口，默认8080
    // historyApiFallback:   //sap页面中的html5的history模式
  }
}

3. 运行本地服务器

3.1. 在package.json中设置命令

  • --open为立即打开网页
    {
  scripts: {
    "dev": "webpack-dev-server --open"
  }
}
  • 注意：直接在终端运行命令 webpack-dev-server--》报错
    • webpack在终端运行时，始终是在全局下找目标的。
    • 在package.json中设置的命令，都是在本地查找目标执行的
      • 另一解决方式：使用相对路径到 node_modules/.bin/webpack-dev-server

3.2. 在终端运行npm run dev,即可自动打开index.html，实现保存即更新网页。

  • 终端显示
    ....
Child html-webpack-plugin for "index.html":
    1 asset
      4 modules
webpack: Compiled successfully.

4. 停止正在运行的本地服务器： 在终端使用Ctrl + C即可

posted @ 2021-02-05 20:17  朝日asahi  阅读(329)  评论(0)  编辑  收藏  举报