webpack5之devServer的常用配置详解

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    // 打包后的文件的输出目录
    path: path.resolve(__dirname, "./build"),
    publicPath: "/abc",
  },
  // 专门为webpack-dev-server
  // devServer为开发过程中, 开启一个本地服务
  devServer: {
    publicPath: "/abc",
    }
  }

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    // 打包后的文件的输出目录
    path: path.resolve(__dirname, "./build"),
    publicPath: "/abc",
  },
  // 专门为webpack-dev-server
  // devServer为开发过程中, 开启一个本地服务
  devServer: {
**    contentBase: path.resolve(__dirname, "./why"),
**    watchContentBase: true, //实时监听contentBase文件变化
    publicPath: "/abc",
   }
  }

module.exports = {
  //...
  devServer: {
    hot: true,
  },
};

module.exports = {
  //...
  devServer: {
    hot: 'only', //hotOnly: true,
  },
};

module.exports = {
  //...
  devServer: {
    port: 8080, 
  },
};

module.exports = {
  //...
  devServer: {
    open: true,
    //在浏览器中打开指定页面：open: ['/my-page']
    //提供要使用的浏览器名称，而不是默认名称
  // open: {
      //   app: {
      //  name: 'google-chrome',
    //  },
   // },
  },
};

module.exports = {
  //...
  devServer: {
    compress: true,
  },
};

module.exports = {
  //...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8888',
         pathRewrite: {
          "^/api": ""
        },
        secure: false,
        changeOrigin: true,
      },
    },
  },
};

module.exports = {
  devServer: {
  //如果设置为true，那么在刷新时，返回404错误时，会自动返回 index.html 的内容； 
    historyApiFallback: true,
  },
};

module.exports = {
  //...
  devServer: {
    historyApiFallback: {
      rewrites: [
        { from: /^/$/, to: '/views/landing.html' },
        { from: /^/subpage/, to: '/views/subpage.html' },
        { from: /./, to: '/views/404.html' },
      ],
    },
  },
};