# webpack5

**Repository Path**: tramcctw/webpack5

## Basic Information

- **Project Name**: webpack5
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-05-04
- **Last Updated**: 2022-05-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack5 新特性

1. 启动服务器不一样

webpack4 为 webpack-dev-server
webpack5 为 webpack server

2. 提供资源模块，内部集成

assets/resource 类似于之前的 file-loader
assets/inline 类似于之前的 url-loader
assets/source 类似于 raw-loader

```js
module: {
  rules: [
    {
      test: /\.(png|jpg|gif)$/,
      type: 'asset',
      // 自动在resource和inline中进行选择
      // 自定义尺寸
      parser: {
        dataUrlCondition: {
          maxSize: 8 * 1024,
        },
      },
    },
  ]
}
```

3. 文件缓存 开发模式下默认会缓存 webpack 模块和 chunk，改善构建速度

   1. cache.type

      - cache 会在开发模式下被设置成
      - cache.type:memory,在生产模式下被禁用
      - cache：true 等价于 cache.type:memory
      - memory 选项是将内容缓存在内存中，并且不允许额外的配置
      - filesystem 使用文件缓存系统

   2. cacheDirectory 当且仅当 cache.type 设置成 filesystem 才可用
      - cacheDirectory 定义缓存目录，默认为 node_module/.cache/webpack

```js
mode:'development',
cache:{
	type:'filesystem',
	// 也可以自定义缓存目录
	cacheDirectory:path.resolve(__dirname,'node_modules/.cac/webpack')
}
```

4. 更好的 tree shaking

让 tree shaking 变的更加智能

```js
{
	mode:'none',
	// 不做任何优化，全部使用配置
	optimization:{
		useExports:true
		// 开启优化(树摇但保留代码)
		minimize:true,
		// 开启压缩(删除未使用代码)
	}
}
```

5. 模块联邦

多个独立的构建可以组成一个应用程序，这些独立的构建之间不应该存在依赖关系，因此可以独立的开发和部署他们
这通常被称作是微前端

被引入模块配置
```js
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
  //  插件 
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/index.html')
    }),
    new ModuleFederationPlugin({
      // 导入时，使用名称标注,对方导入时使用的前缀
      name: 'remote',
      // 编译后的模块文件名，导入时使用，导入的文件名
      filename: 'remoteEntry.js',
      // 以上共webpack导入,remoteEntry.js 单独打包出去
      exposes: {
        // key导入时使用的关键字：对应的模块文件，导入的key值
        './Us':'./src/User.js'
      }
      // 以上共模块导入
    })
  ],
```

引入配置
```js
const ModuleFederationPlugin = require("webpack").container.ModuleFederationPlugin;
//  插件 
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'public/index.html')
    }),
    new ModuleFederationPlugin({
      name: '111',
      remotes: {
        remoteHost:'remote@http://localhost:3005/remoteEntry.js'
      }
    })
  ],


const Us = React.lazy(() => import("remoteHost/Us"))
 <React.Suspense fallback="loading app">
      <Us />
</React.Suspense>
```