Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

a better default template for html-webpack-plugin

License

NotificationsYou must be signed in to change notification settings

jaketrent/html-webpack-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Note - Support for this template is lagging Webpack. This currently only supports (old!) webpack v3. I'mlooking for contributors who would like to give it some loving upgrades.

This is a template for thewebpack pluginhtml-webpack-plugin.It has a few extra features more than thedefault templatewhich will hopefully make it less likely that you'll have to create your ownindex.html file in your webpack project.

Templates for the html-webpack-plugin are implemented usingunderscore templates(previously, in 2.x,blueimp templates). You can write your own aswell.

Legacy version

For the legacy version that works withhtml-webpack-plugin@1.x,npm install html-webpack-plugin@2.

Installation

Install the template in your project with npm:

$ npm install html-webpack-template --save-dev

Basic Usage

To make it work, you need to provide theserequired parameters:

  • inject: false
  • template: require('html-webpack-template')

And you can provide some otheroptional parameters:

  • appMountId: The<div> element id on which you plan to mount a JavaScript app.
  • appMountHtmlSnippet: A small snippet of HTML that will be inserted in the<div> element the appMountId is attached to.
  • appMountIds: An array of application element ids.
  • baseHref: Adjust the URL for relative URLs in the document (MDN).
  • devServer: Insert the webpack-dev-server hot reload script at this host:port/path; e.g.,http://localhost:3000.
  • googleAnalytics.trackingId: Track usage of your site viaGoogle Analytics.
  • googleAnalytics.pageViewOnLoad: Log apageview event after the analytics code loads.
  • lang: String identifying your content language
  • links: Array of<link> elements.
    • If an array element is a string, the value is assigned to thehref attribute and therel attribute is set to"stylesheet";
    • If an array element is an object, the object's properties and values are used as the attribute names and values,respectively.
  • meta: Array of objects containing key value pairs to be included as meta tags.
  • mobile: Sets appropriate meta tag for page scaling.
  • inlineManifestWebpackName: For use withinline-manifest-webpack-plugin.
  • scripts: Array of external script imports to include on page.
    • If an array element is a string, the value is assigned to thesrc attribute and thetype attribute is set to"text/javascript";
    • If an array element is an object, the object's properties and values are used as the attribute names and values,respectively.
  • window: Object that defines data you need to bootstrap a JavaScript app.
  • headHtmlSnippet: A small snippet of HTML that will be inserted in the head element.
  • bodyHtmlSnippet: A small snippet of HTML that will be inserted in the body element.

Plus anyhtml-webpack-plugin config optionsotherwise available.

Example

Here's an example webpack config illustrating how to use these options in yourwebpack.config.js:

{// ...plugins:[newHtmlWebpackPlugin({// Requiredinject:false,template:require('html-webpack-template'),// template: 'node_modules/html-webpack-template/index.ejs',// OptionalappMountId:'app',appMountHtmlSnippet:'<div><i aria-hidden="true"></i></div>',headHtmlSnippet:'<style>div.app-spinner {position: fixed;top:50%;left:50%;}</style >',bodyHtmlSnippet:'<custom-element></custom-element>',baseHref:'http://example.com/awesome',devServer:'http://localhost:3001',googleAnalytics:{trackingId:'UA-XXXX-XX',pageViewOnLoad:true},meta:[{name:'description',content:'A better default template for html-webpack-plugin.'}],mobile:true,lang:'en-US',links:['https://fonts.googleapis.com/css?family=Roboto',{href:'/apple-touch-icon.png',rel:'apple-touch-icon',sizes:'180x180'},{href:'/favicon-32x32.png',rel:'icon',sizes:'32x32',type:'image/png'}],inlineManifestWebpackName:'webpackManifest',scripts:['http://example.com/somescript.js',{src:'/myModule.js',type:'module'}],title:'My App',window:{env:{apiHost:'http://myapi.com/api/v1'}}// And any other config options from html-webpack-plugin:// https://github.com/ampedandwired/html-webpack-plugin#configuration})]}

About

a better default template for html-webpack-plugin

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors20


[8]ページ先頭

©2009-2025 Movatter.jp