@aniyajs/rotor/webpack/webpackDevServer.config.js

基于webpack5开发的一款专注于打包、运行的工具

/**
 * @return { import('webpack-dev-server')['options'] }
 */

const paths = require("../utils/paths");
const { matchNodeModules, matchNodeTemp } = require("../utils/common");
const getHttpsConfig = require("../utils/getHttpsConfig");
const localMockServed = require("../utils/localMockServed");

module.exports = (host, proxy, mockData) => {
  return {
    allowedHosts: "all",
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "*",
      "Access-Control-Allow-Headers": "*",
    },
    // 生成文件启用 gzip 压缩
    compress: true,
    static: {
      directory: paths.appPublic,
      publicPath: [paths.publicUrlOrPath],
      watch: {
        exclude: [
          matchNodeModules(paths.appSrc),
          matchNodeTemp(paths.appTempPath),
        ],
      },
    },
    // 告诉webpack相同的publicPath是重要的。
    // 允许用户使用`/test`而不是`/test/`进入项目
    devMiddleware: {
      publicPath: paths.publicUrlOrPath.slice(0, -1),
    },
    https: getHttpsConfig(),
    host,
    // 代理配置
    // `proxy`运行在`webpack-dev-server`钩子的`before`和`after`之间。
    proxy,
    client: {
      // 发生编译错误或警告时是否覆盖全屏。
      overlay: {
        errors: true,
        warnings: false,
      },
    },
    historyApiFallback: {
      // Dotted paths should still use history callback.
      // See also https://github.com/facebook/create-react-app/issues/387。
      disableDotRule: true,
      index: paths.publicUrlOrPath,
    },
    setupMiddlewares: (middlewares, devServer) => {
      // Handle local mock requests.
      middlewares.unshift({
        name: "localMockServed",
        middleware: localMockServed(mockData, devServer),
      });

      return middlewares;
    },
  };
};