hd-webpack-plugin's Introduction

High-definition processing for HtmlWebpackPlugin

A webpack plugin to add High-definition processing when using HtmlWebpackPlugin.

Installation

npm i hd-webpack-plugin --save-dev

Usage

const HDWebpackPlugin = require('hd-webpack-plugin')

// webpack config
{
  plugins: [
    new HDWebpackPlugin({
      exclude: /index\.html/, // 不需要处理的资源的正则表达式
      designWidth: 375 // 设计稿尺寸（px）
    })
  ]
}

Options

Name	type	Default	Description
designWidth	<Number>	375	设计稿宽度（px）
exclude	<RegExp>	null	不需要处理的资源的正则表达式

Example Webpack Config

const HDWebpackPlugin = require('hd-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

// sample WebPack config
const webpackConfig = {
  entry: {
    h5: './src/h5/index.js',
    pc: './src/pc/index.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        loader: 'babel-loader'
      }
    ]
  },
  plugins: [
    new HDWebpackPlugin({
      designWidth: 375,
      exclude: /pc\/.html|pc\.css/, // pc页面不需要使用高清方案
    }),
    new HtmlWebpackPlugin({
      template: './src/h5/index.html',
      chunks: ['h5']
    }),
    new HtmlWebpackPlugin({
      template: './src/pc/index.html',
      chunks: ['pc']
    }),
  ]
}

Recommend Projects