前言

文档主要是看webpack (opens new window)中文网和极客时间老师的教程进行学习记录的

版本是 webpack4.0 的版本

webpack 打包的时候有时候服务器分配给 node 的内存可能会不够, 造成 javascript heap out of memory 处理办法:

node ./bin/config uat && node --max-old-space-size=5000 ./node_modules/.bin/webpack --config webpack/webpack.uat.config.js --mode production

1. 打包时控制日志信息的展示

2. 扩展依赖的方式

const { ModuleFederationPlugin } = require("webpack").container;

const webpackConfigPath = "react-scripts/config/webpack.config";
const webpackConfig = require(webpackConfigPath);

const override = (config) => {
  config.plugins.push(
    new ModuleFederationPlugin(require("../../modulefederation.config.js"))
  );

  config.output.publicPath = "auto";

  return config;
};

require.cache[require.resolve(webpackConfigPath)].exports = (env) =>
  override(webpackConfig(env));

module.exports = require(webpackConfigPath);

控制版本号方法

"scripts": {
  "start": "PORT=4000 node ./webpack/start.js",
}

const a = {
  devServer: {
    client: {
      webSocketURL: websocketPath,
    },
    static: {
      directory: assetPublicPath,
      watch: {
        ignored: (f: string) => {
          // 生成的类型定义不要监听，否则会引发全局的 reload 使 HMR 失去意义
          return f.endsWith(".d.ts");
        },
      },
    },
    allowedHosts: "all",
    hot: true,
    port: port,
    historyApiFallback: true,
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },
};