group: middleware name: webpack5 title: Webpack5

dn-middleware-webpack5

Features

1. 新版本的中间件采用 ts 进行了完全的代码重写和设计上的改造
2. wepack5 新特性支持：
   1. target 允许传递一个目标列表，并且支持目标的版本。例如 target: "node14"``target: ["web", "es2020"]。
   2. 模块联邦：这是一个颠覆性的feature，远程的模块可以独立编译，然后在运行时进行加载，同时还能够定义公共库来避免重复加载。
   3. 构建优化：optimization中的各种属性的更新和新增，例如 optimization.innerGraph 可以对模块中的标志进行分析，找出导出和引用之间的依赖关系。生产模式下是默认启用的。
   4. 同时API支持了更多可扩展配置
3. 更加智能，自动生成很多默认值，比如文件入口、是否启用ts编译等
4. 除了新功能，还有很多使用上的优化
   1. 新增了长期缓存的算法，这些算法在生产模式下是默认启用的，建议不要设置，使用默认值更合适。optimization.chunkIds和optimization.moduleIds
   2. 统一使用内容哈希，[contenthash]，在只修改注释时优化长期缓存
   3. 删除output.jsonpFunction，自动使用 package.json 中有唯一的名称来防止多个 webpack 运行时的冲突
   4. 支持 Fast Refresh，替换了 HMR，支持 React Hooks 级别的热更新了，具体可往下看(由于兼容性暂时关闭，问题开发者已修复20201102)
5. 其他构建优化
6. 其他性能优化（btw.并不是所有 optimization 配置项都开启就是优化性能，有的只适用于小型项目，大型项目中反而起反作用）

示例

dev:
  - name: webpack5
    watch: true
  - name: server
  - name: browser-sync

build:
  - name: webpack5
    env: "production"

旧版本升级指南

1. 删除原有包，以更新 package.lock.json：npm uninstall dn-middleware-webpack -D && npm i dn-middleware-webpack5 -D
2. 修改 pipe.yml 中间件配置为webpack5
3. 可选：常用多余配置移除
   1. 在 development 环境下，会默认帮你配置
      1. watch：监听文件变化，默认 true 打开
      2. injectCSS：注入 css，默认 true 打开
      3. hot：热更新，默认打开
      4. devtool / sourceMap：默认为 "source-map"
   2. 在 production 环境下，会默认帮你设置
      1. compress：压缩，默认打开
      2. devtool / sourceMap：默认为 false
   3. 文件目录相关默认值
      1. entry 为 "src/index.tsx", "src/index.ts", "src/index.jsx", "src/index.js"时
      2. template 为 "public/index.html", "src/assets/index.html" 时
      3. output 为 "/build" 时
      4. 会自动根据目录中有无 ts 文件来决定要不要打开 ts 编译

配置项属性（基础配置类）

env

类型："development" | "production" 默认值："development"

运行环境，开发环境development，生产环境production

entry

类型：string | object 默认值："src/index" 示例：

  entry: src/test.tsx

  entry:
    (1): src/**.tsx

  entry:
    x: src/index.tsx
    y: src/test.tsx

入口起点

output

类型：string ｜ object 默认值："/build"

输出文件的相对路径

output.path

同 output

output.library

类型：object 默认值：{}

参考：library

output.chunkFileName

同 output 默认值："[name].[chunkhash:8].chunk.js"

默认异步chunk为这个路径，可根据vm中升级前的路径灵活变更

template

类型：string | Array<{ name: string; file: string }> 默认值："public/index.html" 或 "src/assets/index.html"

html模板入口

publicPath

类型：string 默认值：/

异步资源默认前缀，如cdn地址

devtool ｜ sourceMap(v4)

类型：boolean | string 默认值：false

控制是否生成，以及如何生成 source map

target

类型："browser"｜ "node" ｜ "webworker" 默认值："browser"

编译环境

alias

类型：object 默认值：{}

别名

配置项属性（进阶基础配置）

jsxRuntime

类型："automatic" | "classic"

透传给 dn-middleware-babel 的 jsxRuntime 配置项，详细说明请查看相关文档

injectCSS

类型：boolean 默认值：true

是否引入css

cssModules

类型：boolean 默认值：false

是否使用 css Modules

disabledTypeCheck

类型：boolean 默认值：false

是否阻止 ts 类型检查

tscCompileOnError

类型：boolean 默认值：true

ts类型检查中的错误是否会阻断编译

folders

类型：

{
  js?: string;
  css?: string;
  media?: string;
  html?: string;
}

默认值：{}

指定资源子目录名称，主要包括css,js，字体和图片和html的目录，不指定的话会直接输出到output目录下

moduleFederation

类型：object

模块联邦相关配置

js

配置项属性（构建优化类）

compress

类型：boolean 默认值：开发环境默认 false，生产环境默认 true

是否启用压缩（如果使用了compress中间件，需要将此配置设置为 false）

terser.terserOptions

类型： object 默认值: {}

esbuild.minify

类型：boolean | object 默认值：false

是否启用 esbuild 的构建产物压缩能力，代替 TerserPlugin，类型为 object 时透传给 ESBuildMinifyPlugin 作为选项

esbuild.loader

类型：boolean | object 默认值：false

【暂不支持】是否启用 esbuild 的构建能力，代替 babel-loader，类型为 object 时作为 esbuild-loader 的选项

watch

类型：boolean 默认值：开发环境默认 true，生产环境默认 false

是否开启监听模式

externals

类型：object 默认值：{}

打包排除的依赖配置项

external(v4)

类型：boolean 默认值：false

是否要打包排除依赖

hot

类型：boolean 默认值：开发环境默认为 true

是否开启 react-refresh（类似于 HMR）

common.disabled(v4)

类型：boolean 默认值：false

禁用抽取公共部分

common.name(v4)

类型：string 默认值：common

生成的公共资源名称

配置项属性（性能优化类）

htmlMinifier

类型：boolean 默认值：true

是否压缩html

performance

类型：boolean ｜"warning" | "error" 默认值：false

是否开启性能提示及形式

optimization

类型：

{
  minimize?: Boolean;
  minimizer?: any;
  splitChunks?: object;
  innerGraph?: boolean;
}

默认值：false

优化配置项

cache

类型：object 默认值：{ type: "filesystem" }

缓存相关的配置项，参考：官方文档了解相关配置项

配置项属性（分析工具类）

analysis

类型：boolean | object 默认值：false

是否启用分析工具BundleAnalyzerPlugin，以及相关配置项，如是否为其开启server

statsOpts

类型：object

定制 stats 输出项内容