New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

inject-html-webpack-plugin3

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

inject-html-webpack-plugin3

一个基于html-webpack-plugin插件扩展的可自定义注入资源路径的插件。

1.0.0
latest
Source
npm

Version published: 2 years ago

Weekly downloads: 2; increased by100%

Maintainers: 1

Weekly downloads

Created: 2 years ago

Source

InjectHtmlWebpackPlugin

一个基于html-webpack-plugin插件扩展的可自定义注入资源路径的插件。

依赖

webpack - 4.x
html-webpack-plugin - 4.0.0-beta.8

安装

npm install inject-html-webpack-plugin2 --save-dev

基本使用

{
    plugins: [
        new HtmlWebpackPlugin( {
            template: `./src/html/page.hbs`,
            filename: './dist/html/page.html',
            xhtml: true
        } ),
        new InjectHtmlWebpackPlugin()
    ]
}

默认情况下，使用InjectHtmlWebpackPlugin插件，会默认将HtmlWebpackPlugin的options.inject设置为false，并交由InjectHtmlWebpackPlugin设置模板变量传入。

在webpack配置中配置资源跨域

在webpack配置对资源进行跨域配置，最终也可以注入到模板变量的script和link标签中

{
    output: {
        crossOriginLoading: 'anonymous'
    }
}

options

inject - 默认为false，如果设置为true，那么将不会生成新的模板变量，使用HtmlWebpackPlugin自己的模板变量

模板支持

ejs（默认支持）
handlebars

例子

{
    entry： {
        app: './example/inline/src/app.js',
        app2: './example/inline/src/app2.js',
    },

    ...忽略若干配置

    plugins: [
        new HtmlWebpackPlugin( {
            template: `./src/html/page.hbs`,
            filename: './dist/html/page.html',
            xhtml: true,
            chunks: ['app'],
        } ),
        new HtmlWebpackPlugin( {
            template: `./src/html/page2.hbs`,
            filename: './dist/html/page2.html',
            xhtml: true,
            chunks: ['app2'],
        } ),
        new InjectHtmlWebpackPlugin()
    ]
}

那么实际上会生成一个这样的对象注入模板，

app模板属性
{ 
    js: [ 
        '<script src="https://imgcdn50.zuzuche.com/static/js/react-runtime-f6f38831f74b9a7f3775.js" crossorigin="anonymous"></script>',
        '<script src="https://imgcdn50.zuzuche.com/static/js/vender~app~app2-b0e019ca74a52cfa7c7f.js" crossorigin="anonymous"></script>',
        '<script src="https://imgcdn50.zuzuche.com/static/js/style~app-6ca9de33c0d05e1f278d.js" crossorigin="anonymous"></script>',
        '<script src="https://imgcdn50.zuzuche.com/static/js/app-ab23bfa0dea17ff99171.js" crossorigin="anonymous"></script>' 
    ],
    css: [ 
        '<link href="https://imgcdn50.zuzuche.com/static/css/style~app-752d171e573587446e3b.css" rel="stylesheet" crossorigin="anonymous"/>' 
    ],
    manifest: undefined,
    favicon: undefined 
}

app2模板属性
{ 
    js: [ 
        '<script src="https://imgcdn50.zuzuche.com/static/js/react-runtime-f6f38831f74b9a7f3775.js" crossorigin="anonymous"></script>',
        '<script src="https://imgcdn50.zuzuche.com/static/js/vender~app~app2-b0e019ca74a52cfa7c7f.js" crossorigin="anonymous"></script>',
        '<script src="https://imgcdn50.zuzuche.com/static/js/style~app2-cd35f66a9ad216025fc5.js" crossorigin="anonymous"></script>',
        '<script src="https://imgcdn50.zuzuche.com/static/js/app2-e3e6d564b273b5f42b43.js" crossorigin="anonymous"></script>'
    ],
    css: [ 
        '<link href="https://imgcdn50.zuzuche.com/static/css/style~app2-f0d566be024b468994ec.css" rel="stylesheet" crossorigin="anonymous"/>'
    ],
    manifest: undefined,
    favicon: undefined 
}

在模板中使用变量注入资源

ejs

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
    <% assets.css.forEach(function(file){ %>
      <%= file %>
    <% }); %>
  </head>
  <body>
  <div id='root'></div>
  <% assets.js.forEach(function(file){ %>
    <%= file %>
  <% }); %>
  </body>
</html>

handlebars

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Webpack App</title>
  {{#each assets.css}}
    {{{this}}}
  {{/each}}
</head>

<body>
  <div id='root'></div>
  {{#each assets.js}}
    {{{this}}}
  {{/each}}
</body>

</html>

将资源inline注入

webpack配置entry入口特殊处理
建议只对node_modules中的包进行inline
inline会直接读取文件内容进行注入，并不会注入经过webpack编译的代码

{
    entry： {
        app: './example/inline/src/app.js',
        eaentry: '@eagleeye-jssdk/loader/zuzuche.js?__inline'
    },

    ...忽略若干配置

    plugins: [
        new HtmlWebpackPlugin( {
            template: `./src/html/page.hbs`,
            filename: './dist/html/page.html',
            xhtml: true,
            chunks: ['app'],
        } ),
        new InjectHtmlWebpackPlugin()
    ]
}

模板引入

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Webpack App</title>
  {{> './tpl/head.handlebars'}}
  {{{inline.eaentry}}}
  {{#each assets.css}}
    {{{this}}}
  {{/each}}
</head>

<body>
  <div id='root'></div>
  {{#each assets.js}}
    {{{this}}}
  {{/each}}
</body>

</html>

FAQs

What is inject-html-webpack-plugin3?

Is inject-html-webpack-plugin3 popular?

Is inject-html-webpack-plugin3 well maintained?

Package last updated on 30 Sep 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install