webpack-plugin-h5

Webpack preset for H5 mobile web，提供 viewport/rem 两种移动端适配策略。

推荐：快速起步

先用 create-all 创建 Webpack + React 或 Vue 项目：

npm create create-all@latest

再在 webpack.config.ts 的 presets 中加入 h5()（见下方「使用」）。

English — Start with create-all (npm create create-all@latest, Webpack + React/Vue), then add h5() to presets.

安装

npm i webpack-common webpack-plugin-h5 -D
# viewport 模式推荐安装：
npm i postcss-px-to-viewport-8-plugin -D

本包为 preset 扩展，通常与 webpack-plugin-react 或 webpack-plugin-vue 组合使用。

使用

与 React 或 Vue 插件组合使用：

// webpack.config.ts（React + H5）
import { defineConfig } from 'webpack-common'
import react from 'webpack-plugin-react'
import h5 from 'webpack-plugin-h5'

export default defineConfig({
  presets: [react(), h5()],
})

// webpack.config.ts（Vue + H5）
import { defineConfig } from 'webpack-common'
import vue from 'webpack-plugin-vue'
import h5 from 'webpack-plugin-h5'

export default defineConfig({
  presets: [vue(), h5()],
})

配置项

| 选项 | 类型 | 默认值 | 说明 | |------|------|--------|------| | adaptMode | 'viewport' \| 'rem' | 'viewport' | 适配模式 | | designWidth | number | 375 | 设计稿宽度（px） | | unitPrecision | number | 5 | vw 单位精度 | | selectorBlackList | string[] | [] | 不进行转换的选择器前缀 | | remRatio | number | 10 | rem 模式根字体换算比（designWidth / remRatio = 1rem） |

说明

• adaptMode: 'viewport' 时使用 postcss-px-to-viewport-8-plugin 自动将 px 转换为 vw
• adaptMode: 'rem' 时向 HTML 注入动态根字体脚本，实现 rem 自适应
• 如未安装 postcss-px-to-viewport-8-plugin，viewport 转换会被跳过并打印提示

许可证

MIT