webpack devServer 相关配置

1、webpack devServer 开启服务的简单配置

module.exports = {
  /**
   * devServer 需要额外安装
   * devServer 打包后的文件不会放在本地的 dist 文件夹中，而是放在了电脑的内存中
   * 这样有效的提高了打包的速度
   */
  devServer: {
    // devServer 启的服务器根目录位置
    contentBase: './dist',
    // 开启服务器时，顺便打开浏览器
    open: true,
    /**
     * 开启接口代理
     * 以 /api 开头的所有 http 请求
     * 全部斗代理到 http://127.0.0.1:5000 中
     * 如 /api/test 的请求编程 http://127.0.0.1:5000/api/test
     */
    proxy: {
      '/api': 'http://127.0.0.1:5000'
    },
    // 设置端口
    port: 8888,
    /**
     * 开启 Hot Module Replace 模块热更新
     * 此配置还需要对 plugins 进行额外配置，配置如下
     * 模块热更新的作用是在开发中，修改样式文件时不会造成文件重新被打包刷新
     * 大大方便了开发者中开发中对样式的调试
     */
    hot: true,
    hotOnly: true
  }
}

2、模块热更新 plugins 依赖配置

// 需要引入 webpack 依赖
{
  plugins: [
    // 开启模块热更新
    new webpack.HotModuleReplacementPlugin()
  ]
}

3、利用 before 配置项，将 public/mock 里面的所有 json 文件定制成接口，方便开发环境前端自身的数据 mock

module.exports = {
  /**
   * 一般用于开发环境
   * 需要额外安装 webpack-dev-server 依赖
   */
  devServer: {
    // devServer 开启了两个接口，允许正常调用
    before(app){
      // 收集所有的最终路径
      // const allFiles = []
      const basePath = '../public/mock/'
      const mockDirectory = fs.readdirSync(path.resolve(__dirname, '../public/mock'))
      mockDirectory.forEach((item) => {
        const mock = fs.readdirSync(path.resolve(__dirname, `${basePath}${item}`))
        mock.forEach((i) => {
          // allFiles.push(`${item}/${i.replace(/\.json$/, '')}`)
          app.get(`/${item}/${i.replace(/\.json$/, '')}`, (req, res) => {
            res.sendFile(path.resolve(__dirname, `${basePath}${item}/${i}`))
          })
        })
      })
      // console.log(allFiles)
    },
    // devServer 启的服务器根目录位置
    contentBase: './dist',
    port: 8888,
    /**
     * 开启 Hot Module Replace 模块热更新
     */
    hot: true,
    hotOnly: true
  }
}

文件目录如下