webpack-plugin-h5

Webpack preset for H5 mobile web — viewport/rem 适配，开箱即用。

安装

npm i webpack-plugin-h5 -D
# 推荐同时安装 postcss-px-to-viewport-8-plugin（viewport 适配）
npm i postcss-px-to-viewport-8-plugin -D

使用

与 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()],
})

配置项

| 选项 | 类型 | 默认值 | 说明 | |------|------|--------|------| | viewportWidth | number | 750 | 设计稿宽度（px），用于 px→vw 转换 | | unitPrecision | number | 5 | vw 单位精度 | | minPixelValue | number | 1 | 小于此值的 px 不转换 | | mediaQuery | boolean | false | 是否转换媒体查询中的 px |

说明

• 使用 postcss-px-to-viewport-8-plugin 将 px 单位自动转换为 vw，无需手动计算
• 如未安装 postcss-px-to-viewport-8-plugin，PostCSS 插件将被跳过（不报错）
• 适合结合 webpack-plugin-react 或 webpack-plugin-vue 使用

许可证

MIT