webpack5

持久化缓存

js

 cache: {
        type: 'memory', // 'memory' | 'filesystem'
        cacheDirectory: path.resolve(__dirname, 'node_modules/.cache/webpack')
    }

资源模块

资源模块是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader

• raw-loader => asset/source 导出资源的源代码
• file-loader => asset/resource 发送一个单独的文件并导出 URL
• url-loader => asset/inline 导出一个资源的 data URI

模块联邦 （Module Federation）

• 模块联邦目的就是更好的共享代码
  • 在之前，共享代码一般需要用npm发包来解决，npm需要构建,发布，引用这些阶段
• 模块联邦的打包机制：修改了 __webpack_require__ 的部分实现，在require的时候从远程加载资源，然后合并到 __webpack_modules__ 中

text

// host
module.exports = {
  plugins: [new ModuleFederationPlugin({
      name: "host",
      remotes: {
          "app": "app@http://localhost:3001/remote-entry.js"
      },
      shared: {
          react: {
              eager: true
          }
      }
  })]
}

// remote
module.exports = {
  plugins: [new ModuleFederationPlugin({
      name: "app",
      filename: 'remote-entry.js',
      exposes: {
          "button": "./src/button.js"
      },
      shared: ['react']
  })]
}