Giter VIP home page Giter VIP logo

html-webpack-manifest-plugin's Introduction

html-webpack-manifest-plugin

自动生成一个manifesthtml-webpack-plugin插件

同步将manifest文件注入到html中,需要配合html-webpack-plugin一起使用

插件会同时生成需要尺寸的favicon

目前只支持了 webpack4+,因为 4 以下的钩子没有挂,所以不能用,懒得写了,就这样吧,自己能用就行了

这个插件我是在用了好几个自动生成 favicon 的插件之后非常不满意,比如这个,这么多 star,但是连基本的 manifest� 需要的字段都能丢了,pr 也不合并,只能自己来了,当然只是满足了我自己需求,其他的不考虑了

使用

没有上传 npm,所以直接github安装

这个库目前主要依赖了sharplodash两个库,依赖没有装成功就手动安装咯...我搞不清这些东西怎么自动安装的,垃圾npm

module.exports = {
    ...
    plugins: [
        new HtmlWebpackPlugin(),
        new HtmlWebpackManifestPlugin({
            manifest: {
                // manifest文件名称,带有 [hash:8]可以指定hash值和hash长度
                filename: 'manifest.[hash:8].json',
                // manifest文件的位置
                filePath: '/static/',
                // manifest文件前缀,主要还是自动添加cdn之类的作用
                prefix: 'https://cdn.com/'
                // manifest文件中的icon,指定图标的位置,大小尺寸之后会自动生成对应的图标
                icons: {
                    // 图标位置
                    logo: path.resolve(__dirname, './static/logo.png'),
                    // 图标尺寸,都是1:1的图
                    sizes: [36, 48, 72],
                    // 图标类型
                    type: 'image/png',
                    // 输出文件的URL
                    output: '/static/icons-[hash:8]/',
                    // 增加文件前缀,可以添加cdn地址
                    prefix: '/'
                }
                config: {
                    // 这里可以接受manifest文件中需要的任何参数,也就是你填什么在这,生成的manifest文件中就有什么
                    name: 'html webpack manifest plugin',
                    short_name: 'manifest',
                    ...
                }
            },
            // 这里主要配置生成head中的一些链接,按照规则自动生成并inject
            head: {
                meta: [{
                        charset: 'utf-8'
                    },
                    {
                        name: 'viewport',
                        content: 'width=device-width, initial-scale=1'
                    },
                    {
                        hid: 'description',
                        name: 'description',
                        content: 'Meta description'
                    }
                ],
                link: [{
                    rel: 'dns-prefetch',
                    href: 'https://d15lz63ykon5oa.cloudfront.net'
                }, {
                    rel: 'dns-prefetch',
                    href: 'https://d14rk0dlif47fw.cloudfront.net'
                }, {
                    rel: 'preconnect',
                    href: 'https://d1n1fwner8zc14.cloudfront.net/'
                }]
            }
        })
    ]
}

html-webpack-manifest-plugin's People

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.