jaketrent / html-webpack-template Goto Github PK

View Code? Open in Web Editor NEW

830.0 15.0 139.0 85 KB

a better default template for html-webpack-plugin

License: MIT License

JavaScript 1.17% EJS 98.83%

html-webpack-template's People

Stargazers

Watchers

Forkers

vectart 3q- thebalkanfella hansthinhle maxrelax johnprog carlosvega20 domderen airroom clementparis016 lkay strayiker jpickwell mrexclamation intergalactic-overlords troy-lamerton jason790 williamboman rafeememon joepin nejik liuliangsir illia-sernikov jcgertig madakerez rlopes-fixeads kuldeepkeshwar qiyuan-wang kublaj tridon777 hlight olistik shodanuk cschweda doches chenrui2014 jameswquinn temasm mehcode diegofaria kaimiyang eliperelman harin holyfirexx hugh0524 mehrdad-shokri lizardking131313 techbandyer venkaiahkagga mickeymouse623 gbarthos cameronhimself nkansal96 shanmugarajbe fullstackenviormentss jsmarcus mmaday graf009 ddbk duvilliera xiaomuweb chendi-forward devonice asethwright karelsuchomel eresid mkonnegen-zz mantissa23 choiicc markthomas93 linusu codeshaurya kankanol1 vikrambhatla advence-liz matthewrobb brandonhamilton vladimyr yunyoujun jazzninja madebyae maybeqhl abyss-soft phild-fbo adrienlemaire duterte jason-kuaikan bj00rn tobiaslounsbury intei-cloud juliengrelet forivall tomhalley eworkit32 hugetiny lxx1997 emosbaugh szymontmeniga tay-space

html-webpack-template's Issues

Output location change

I have the following output template

<script>
// my custom code from the template that needs to be loaded after webpack
</stript>

<script>
//from webpack
</stript>

is there a way to change the ordering so that the webpack build isn't always at the end

html-webpack-plugin 2 is out now

Hey,

See https://www.npmjs.com/package/html-webpack-plugin . I think you can bump your template version now. 👍

Differentiate css and js for template in chunks

on using this below all the chunks including css are also added as script html tag element rather than css tag element. how to add css with link tag and js with script tag using chunks.

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>

<% } %>

Also tried using below , but this include the css as well.

<% for (var chunk in htmlWebpackPlugin.files.js) { %>

<% } %>

Add tests that verify the generated HTML

Hi!

In order to make #61 (and any other changes) easier to review (since one can also review the changed expected test output) and reduce the chance of regressions, it would be great to have some tests (currently there are none) :-)

Template execution failed

Hi, after upgrading to 5.1.0 I am getting the following error when I try to build with webpack:

ERROR in Template execution failed: TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined
ERROR in TypeError: Cannot read property 'Symbol(Symbol.iterator)' of undefined

index.ejs:150
[react-hot-boilerplate]/[html-webpack-template]/index.ejs:150:45

index.ejs:183 module.exports
[react-hot-boilerplate]/[html-webpack-template]/index.ejs:183:4

index.js:255
[react-hot-boilerplate]/[html-webpack-plugin]/index.js:255:16

util.js:16 tryCatcher
[react-hot-boilerplate]/[html-webpack-plugin]/[bluebird]/js/release/util.js:16:23

promise.js:504 Promise._settlePromiseFromHandler
[react-hot-boilerplate]/[html-webpack-plugin]/[bluebird]/js/release/promise.js:504:31

promise.js:561 Promise._settlePromise
[react-hot-boilerplate]/[html-webpack-plugin]/[bluebird]/js/release/promise.js:561:18

promise.js:598 Promise._settlePromiseCtx
[react-hot-boilerplate]/[html-webpack-plugin]/[bluebird]/js/release/promise.js:598:10

async.js:143 Async._drainQueue
[react-hot-boilerplate]/[html-webpack-plugin]/[bluebird]/js/release/async.js:143:12

async.js:148 Async._drainQueues
[react-hot-boilerplate]/[html-webpack-plugin]/[bluebird]/js/release/async.js:148:10

async.js:17 Immediate.Async.drainQueues
[react-hot-boilerplate]/[html-webpack-plugin]/[bluebird]/js/release/async.js:17:14

Downgrading to 5.0 solved the problem.

inlineManifestWebpackName not working

I try to inline webpack manifest but with the following config is not working:

module.exports = {
  optimization: {
    runtimeChunk: { name: 'runtime' }
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: false,
      template: require('html-webpack-template'),
      inlineManifestWebpackName: 'runtime'
    }),
    new InlineManifestWebpackPlugin()
  ]
};

Note: 'runtime' is the default name for webpack manifest.

My devDependencies versions:

"html-webpack-plugin": "^3.2.0",
"html-webpack-template": "^6.2.0",
"inline-manifest-webpack-plugin": "^4.0.0",
"webpack": "^4.10.1"

What's happen

Looking inside html-webpack-template.ejs I see:

<% if (htmlWebpackPlugin.options.inlineManifestWebpackName) { %>
  <%= htmlWebpackPlugin.files[htmlWebpackPlugin.options.inlineManifestWebpackName] %>
<% } %>

Logging htmlWebpackPlugin.files, there is no plain manifest code inside this object but only a reference to 'runtime' chunk.

Solution

We can use the compilation object and add the following code to the template:

Add new code: set a global variable webpackManifestName above <!DOCTYPE html>

<% const webpackManifestName = htmlWebpackPlugin.options.inlineManifestWebpackName ? 
new RegExp(htmlWebpackPlugin.options.inlineManifestWebpackName, 'g') : '' %>

Replace the old inlineManifestWebpackName logic with a new one

<% if (webpackManifestName) { %>
    <script type="text/javascript">
      <% const webpackManifest = htmlWebpackPlugin.files.js
      .filter( file => file.match(webpackManifestName) ); %>

      <%= compilation.assets[webpackManifest].source() %>
    </script>
<% } %>

Modify the original code used to link the chunks: add some logic to prevent the manifest to be linked if its set as inline

<% Object.keys(htmlWebpackPlugin.files.chunks)
  .filter(chunk => webpackManifestName ? !chunk.match(webpackManifestName) : chunk)
  .forEach(chunk => {
    if (htmlWebpackPlugin.files.jsIntegrity) { %>
      <script
        src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"
        type="text/javascript"
        integrity="<%= htmlWebpackPlugin.files.jsIntegrity[htmlWebpackPlugin.files.js.indexOf(htmlWebpackPlugin.files.chunks[chunk].entry)] %>"
        crossorigin="<%= webpackConfig.output.crossOriginLoading %>">
      </script>
    <% } else { %>
      <script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>" type="text/javascript"></script>
    <% } %>
<% }) %>

Note: InlineManifestWebpackPlugin is not strictly necessary, in this case it's used to delete runtime.js chunk in the dist/ folder.

Snippet use file content

How can I do to pass contents of a file as html in headHtmlSnippet and bodyHtmlSnippet ?

Please add support for html-webpack-plugin 4

html-webpack-plugin 4 has been released. Please add support/upgrade the peer dependencies.

https://dev.to/jantimon/html-webpack-plugin-4-has-been-released-125d

Outdated Optional Tags

Would it be possible to remove the 'conditional IE tags' ( etc..) and <meta http-equiv="X-UA-Compatible" content="IE=edge"> from the default index.ejs file?

Heres a great SO question and answers on the meta tag part. https://stackoverflow.com/questions/26346917/why-use-x-ua-compatible-ie-edge-anymore

Include 'inject: false,' configuration flag

Your example should include and highlight that you need to add the inject:false, configuration option.

If you don't asset references are added twice to the resulting html file.
Once based on the template, and an additional time because they are injected.

Integrate external manifest file

How do the example load manifest file?

https://github.com/jaketrent/html-webpack-template/blob/master/index.ejs#L2

The 6.0.1 release contains older content than the 5.6.0 release

Hi!

In neutrinojs/neutrino#184 we were trying to work out why we couldn't use the language customisation feature from 49ea502, even though we thought we were using the latest version of this plugin (6.0.1).

It turns out that the most recent (in terms of date) release of this plugin was given the version 5.6.0, which is a lower number than the two releases prior to it (which were 6.0.0 and 6.0.1). This means people using ^6.0.1 as a version range are not actually getting the most recent version of the plugin. (See the NPM versions/dates below)

Please could a new release be published with version 6.0.2 or higher, so the recent fixes are picked up?

$ npm view html-webpack-template time

{ modified: '2017-09-14T10:02:15.479Z',
  created: '2014-12-26T15:08:05.270Z',
  ...
  '5.5.1': '2016-12-19T22:19:07.863Z',
  '6.0.0': '2016-12-21T23:48:11.283Z',
  '6.0.1': '2017-01-27T22:48:26.960Z',
  '5.6.0': '2017-07-11T12:40:09.969Z' }

Add git tags for recent releases

Hi!

When trying to figure out #59, I noticed that the most recent git tag was for 5.2.0, which made debugging that issue harder.

Please could the following tags be added?

5.3.0 -> aad4ea7
5.4.1 -> 3f7144b
5.4.2 -> 6600b68
5.5.0 -> edc8e1f
5.5.1 -> 3466e4a
6.0.0 -> 3ad9fdd
6.0.1 -> 739fb35
5.6.0 -> e9043e2 (this release is actually "newer" than 6.0.1)

(This list was generated using a combination of the NPM gitHead value, with confirmation by diffing a local checkout of the repo against the NPM tarball).

Many thanks :-)

Allow passing variables that will be expanded

Is there any way to pass variables that will be interpolated in the final output? E.g. I want to use a different prefix to serve my favicons in dev & prod. I'd like to be able to put something like <link rel="icon" type="image/png" href="$MEDIA_PREFIX/favicons/favicon-32x32.png" sizes="32x32"> in my template and have $MEDIA_PREFIX expanded to a value from config.

Is this possible, or could it be added please?

snippet work with require

common.html

<div>123123</div>

code

  plugins: [
    new HtmlWebpackPlugin({
      inject: false,
      template: HtmlWebpackTemplate,
      appMountId: 'ranwawa',
      appMountSnippet: require('./src/common.html'),  // =>  Unexpected token <
      bodyHtmlSnippet: '<div>21123</div>',

  plugins: [
    new HtmlWebpackPlugin({
      inject: false,
      template: HtmlWebpackTemplate,
      appMountId: 'ranwawa',
      appMountSnippet: require('html-loader!./src/common.html'),  // =>   Cannot find module 'html-loader!./src/common.html'
      bodyHtmlSnippet: '<div>21123</div>',

Failed to work with html-webpack-template

Description

I am naming the runtimeChunk as manifest, and using the InlineManifestWebpackPlugin with the string option of the same name: manifest. The webpack config is setup like the following:

optimization: {
    runtimeChunk: {
      name: 'manifest'
    }
},

plugins: [
    new CleanWebpackPlugin(),

    new HtmlWebpackPlugin(htmlTemplate),
    new InlineManifestWebpackPlugin('manifest'),

    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
]

And the html-webpack template has the inlineManifestWebpackName: 'manifest', defined like the following:

module.exports = {
  // Required
  inject: false,
  template: require('html-webpack-template'),
  // template: 'node_modules/html-webpack-template/index.ejs',

  // Optional
  appMountId: 'root-entry',
  bodyHtmlSnippet: '<custom-element></custom-element>',
  meta: [
    {
      name: 'my App',
      content: 'Something descriptive'
    }
  ],
  mobile: true,
  lang: 'en-US',
  inlineManifestWebpackName: 'manifest',
  title: 'my App'

  // And any other config options from html-webpack-plugin:
  // https://github.com/ampedandwired/html-webpack-plugin#configuration
};

The final HTML file looks like when inject: false:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta content="ie=edge" http-equiv="x-ua-compatible">
    <meta name="my App" content="Something descriptive">
    <title>my App</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
  </head>
  <body>
    <custom-element></custom-element>
    <div id="root-entry">
    </div>
    
    <script src="/build/vendors.0f14.js" type="text/javascript"></script>
    <script src="/build/app.b7d1.js" type="text/javascript"></script>
  </body>
</html>

with inject: true

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta content="ie=edge" http-equiv="x-ua-compatible">
    <meta name="my App" content="Something descriptive">
    <title>my App</title>
    <meta content="width=device-width, initial-scale=1" name="viewport">
  <meta name="my App" content="Something descriptive"></head>
  <body>
    <custom-element></custom-element>
    <div id="root-entry">
    </div>
    
    <script src="/build/manifest.2902.js" type="text/javascript"></script>
    <script src="/build/vendors.0f14.js" type="text/javascript"></script>
    <script src="/build/app.b7d1.js" type="text/javascript"></script>
  <script type="text/javascript">RUNTIME IS INJECTED HERE</script>
  <script type="text/javascript" src="/build/vendors.0f14.js"></script>
  <script type="text/javascript" src="/build/app.b7d1.js"></script>
</body>
</html>

It's not really clear why inject: false is not working. And in the inject: true I get duplicate files.

html-webpack-template not generating html

Hi. After trying the html-webpack-plugin, I have decided to try the template plugin. There are no errors when I run my production build, all of my scripts and title tags are generated. But absolutely no html shows up on the page i.e. no html content whatsoever. The only things on my index page are the background image and background color. My template options include inject: true and template: require('html-webpack-template'). Any ideas what could be wrong. Thanks.

NPM packages include .idea directory

Hi!

Some of the published packages include an .idea/ directory, eg:

$ curl -sSfL https://registry.npmjs.org/html-webpack-template/-/html-webpack-template-5.5.1.tgz  | tar -zt | grep '.idea'
package/.idea/.name
package/.idea/html-webpack-template.iml
package/.idea/jsLibraryMappings.xml
package/.idea/libraries/html_webpack_template_node_modules.xml
package/.idea/misc.xml
package/.idea/modules.xml
package/.idea/vcs.xml
package/.idea/workspace.xml

I think it would make sense to add this directory to .npmignore.

Enhanced favicon/link support

It would be great if your template supported advanced favicon configuration such as:

<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/favicon.ico">

I was thinking the simplest way to do this would be by enhancing the links option to accept and array of strings or an array of objects (or a mix of both). If an object is passed in, its properties will be converted to attributes on the rendered link. Passing a string will render it in the existing way making it backwards compatible.

A simple solution could be as follows (index.ejs):

NOTE: Probably a better way in ejs, but this is the first time I've used it

  <% if (htmlWebpackPlugin.options.links) { %>
  <% for(var link of htmlWebpackPlugin.options.links) { %>
  <% if (link !== null && typeof link === 'object' ) { %>
  <link
    <% for (var key in link) { %>
    <%= key %>="<%= link[key] %>"
    <% } %>
  >
  <% } else { %>
    <link href="<%= link %>" rel="stylesheet">
  <% } %>
  <% } %>
  <% } %>

Example: webpack.config.js:

    new HtmlWebpackPlugin({
      // Required
      inject: false,
      template: require('html-webpack-template'),
      // options
      links: [
        '/myStylesheet.css',
        {
          rel: 'apple-touch-icon',
          href: '/apple-touch-icon.png',
          sizes: '180x180',
        },
        {
          rel: 'icon',
          type: 'image/png',
          href: '/favicon-32x32.png',
          sizes: '32x32',
        },
        {
          rel: 'icon',
          type: 'image/png',
          href: '/favicon-16x16.png',
          sizes: '16x16',
        },
        {
          rel: 'manifest',
          href: '/manifest.json',
        },
        {
          rel: 'mask-icon',
          href: '/safari-pinned-tab.svg',
          color: '#5bbad5',
        },
        {
          rel: 'shortcut icon',
          href: '/favicon.ico',
        },
      ],
    }),

Can you add language in option?

I nees another language in index, but in template hardcode

<html lang="en" >

Support Google Tag Manager

Currently the template supports adding a Google Analytics script. Google Tag Manager on the other hand can do much more, and can be used to install Google Analytics as well (among other things). So basically by supporting GTM, you get a more general purpose tool that does GA and more.

Tag missing for 6.1.0 release

Hi!

Looking at the repository I thought 6.0.2 was the last release, since that's the most recent Git tag present, however NPM is reporting 6.1.0 as the latest?
https://www.npmjs.com/package/html-webpack-template

Many thanks :-)

Add dir=rtl to body tag

How can I add a dir tag to body with html webpack template?

Allow `template: require('html-webpack-template')`

It would be useful if you could do just template: require('html-webpack-template').

I noticed your main is set to point at index.ejs. Instead you could have something like this:

index.js

var fs = require('fs');

var template = fs.readFileSync('./index.ejs', {encoding: 'utf-8'});

module.exports = template;

I know it's a blocking call but I don't know if it matters much.

The biggest advantage of going through a require like this is that it would provide a neat API. If the EJS changes for some reason, the import would still remain the same. This scheme would also work with npm-install-webpack-plugin.

What do you think? I can PR this if you want.

Initial application state

Any suggestions on how to inject initial state for a javascript application?

Initial state would be unique for each visitor, so after webpack compilation has already run and the html file is built?

Option to set another types of apps (AngularJS, Angular2...)

Hi! Thanks you for this project. I wonder if you can set an option to define another types of webapps.

AngularJS uses a custom html attribute to define the root of the application.
Angular2 uses a custom html tag to define the main view of the application, cause the actual bootstrap it's done in compilation.

I guess other frameworks would use a different way to do this.

Do you still maintain this repo?

Firstly thanks for create this convenient package that is make html template easier for us.

But recently I have a requirement that needs to customize the meta tags for disabling "user-scalable" , but right now the repo doesn't support this function and apparently i don't want to add a custom template to my project.

I saw one pull request that from @renjithgr which perfectly solves the problem, why don't you merge it? i thought it would be useful and helpful. And could you tell me why if you don't want to merge it?

Underscores template not being parsed

I'm sure this is a stupid config issue on my end. The index.html file that is being emitted is not interpolating the underscores template {% %} markup, so the result looks like this:

{% if (o.htmlWebpackPlugin.files.favicon) { %} {% } %} {% if (o.htmlWebpackPlugin.options.mobile) { %} {% } %} {% for (var css in o.htmlWebpackPlugin.files.css) { %} {% } %} {% if (o.htmlWebpackPlugin.options.unsupportedBrowser) { %} {% } %} {% if (o.htmlWebpackPlugin.options.appMountId) { %}
{% } %} {% if (o.htmlWebpackPlugin.options.appMountIds && o.htmlWebpackPlugin.options.appMountIds.length > 0) { %} {% for (var index in o.htmlWebpackPlugin.options.appMountIds) { %}
{% } %} {% } %} {% if (o.htmlWebpackPlugin.options.window) { %} {% } %} {% for (var chunk in o.htmlWebpackPlugin.files.chunks) { %} {% } %} {% if (o.htmlWebpackPlugin.options.devServer) { %} {% } %} {% if (o.htmlWebpackPlugin.options.googleAnalytics) { %} {% } %}

Here's the relevant section of my webpack.config.js:

plugins: [
        // Auto-generate HTML index.html file
        new HtmlWebpackPlugin({
            template: path.resolve('node_modules/html-webpack-template/index.html'),
            title : APP_TITLE,
            mobile : true,
            appMountId : "main",
            showErrors : true
        })
    ]

If I comment out the html-webpack-template properties (template, mobile, appMountId) I get the default webpack-html-plugin index.html and all is lovely.

The only other thing that could be off here is that at this point my entry point is an empty js file, but I don't see what that might change anything. Oh, and here's the compilation output:

webpack --progress --colours
Hash: 1985222cbfc9235e1482  
Version: webpack 1.12.11
Time: 1433ms
     Asset     Size  Chunks             Chunk Names
 bundle.js   1.4 kB       0  [emitted]  main
index.html  3.53 kB          [emitted]  
    + 1 hidden modules
Child html-webpack-plugin for "index.html":
        + 3 hidden modules

Fail to work with add-asset-html-webpack-plugin

Description

I used DllPlugin to split vendors, and add-asset-html-webpack-plugin is introduced to integrate the vendors into the html-webpack-plugin's output.

  plugins: [
    new AddAssetHtmlPlugin({
      filepath: path.resolve(__dirname, './dist/vendor/vendor.*.dll.js'),
      includeSourcemap: false
    }),
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: require('./dist/vendor/manifest.json')
    }),
    new HtmlWebpackPlugin({
      inject: false,
      template: require('html-webpack-template')
    }),
  ]

When I introduced html-webpack-template in my webpack configuration, an issue occurs:
The HTML file generated by html-wepack-template doesn't contain the vendor bundle, though listed in the output of webpack.

Webpack's output:

                               Asset       Size  Chunks                    Chunk Names
b00fcf2063016f7ec41b05ca5950f07d.png      34 kB          [emitted]
         app.6c2d3068ce2228ee93ec.js     811 kB       0  [emitted]  [big]  app
                         favicon.png    1.13 kB          [emitted]
  vendor.07d80adac38099099c8d.dll.js    1.41 MB          [emitted]  [big]
                          index.html  779 bytes          [emitted]

HTML files:

<!DOCTYPE html>
<html lang="en" >
  <head>
     .....
  </head>
  <body> 
    <div id="root"></div>   
    <script src="/app.6c2d3068ce2228ee93ec.js" type="text/javascript"></script>
  </body>
</html>

Solutions I've tried

When I config the HtmlWebpackPlugin with inject: true, the webpage works, but there are two app.js included in the HTML files, one by HtmlWebpackPlugin and the other by html-webpack-template. It's not the best practice.
I try to import the vendor.js by using scripts parameters of html-webpack-template, but it seems that globbing is not supported, which makes me confusing in dealing with a vendor bundle with chunkhash.

npm install instructions for version 3 are wrong

In the npm page for this library, it states the following:

Beta version

For the new version that works with [email protected], npm install html-webpack-plugin@3.

...

it should read " ... ... npm install html-webpack-template@3."

Notice that the name of the npm package is wrong

How do I inlude local scripts?

How can I include local scripts, for example analytics and keep the template clean?

Why so much white space?

Why is there so much white space in resulting HTML?

Support for base element

I already posted this in html-webpack-plugin, they suggested it would be a better fit for this template, which I'm inclined to agree with.

Currently my only reason for customizing the default template is to set a base URL, which is required when using react-router on a sub-directory.

As it is common to use a different base URL for development and deployment, it would be useful to be able to specify this as a config option.

scripts option broken when use cli arguments

When I use html-webpack-template with cli argumnet like:

"start": "webpack --plugin=html-webpack-plugin?template=./node_modules/html-webpack-template/index.ejs,mobile=true,inject=false,appMountId=app,scripts=vendor.js"

It's will render follow script tags:

<script src="v" type='text/javascript'><script>
<script src="e" type='text/javascript'><script>
<script src="n" type='text/javascript'><script>
<script src="d" type='text/javascript'><script>
<script src="v" type='text/javascript'><script>
<script src="o" type='text/javascript'><script>
<script src="r" type='text/javascript'><script>
<script src="." type='text/javascript'><script>
<script src="j" type='text/javascript'><script>
<script src="s" type='text/javascript'><script>

Support HTML injections / license comment

Support an option accepting a string to be injected as a comment to specify license.
Or alternatively, any custom HTML to be injected at the top or bottom of the document, or further of the body or head elements.

HtmlWebpackPlugin key XHTML is ignored

I need render link tags as self-closing. xhtml: true does't working.
html-webpack-plugin: 2.30.1
html-webpack-template: 6.1.0
webpack: 3.8.1
My configuration example:

{
  appMountId: 'root',
  chunks: ['app', 'vendor'],
  favicon: path.join(__dirname, '../src/main/resources/images/favicon.ico'),
  filename: '../templates/app.html',
  inject: false,
  minify: {
    collapseInlineTagWhitespace: true,
    collapseWhitespace: true,
    conservativeCollapse: true,
    keepClosingSlash: true,
    minifyCSS: true,
    minifyJS: true,
    minifyURLs: true,
    quoteCharacter: '"',
    removeAttributeQuotes: false
  },
  template: HtmlWebpackTemplate,
  title: 'Application',
  xhtml: true
}

I'm currently use LEGACYHTML5 workaround from nekohtml.
Thanks in advance.

Build issues with Module Federation

Hey!

We run into some build issues when Module Federation is enabled alongside this plugin. I and a most users in the community who use MF have been running off my fork, which wasn't intended (untested dirty patch to make builds work)

I've got a stack of repos this can be tested against https://github.com/module-federation/module-federation-examples/tree/master/bi-directional

I believe HTML webpack plugin attempts to include the container runtime in an incorrect manner.

FYI: Not compatible with HtmlWebpackInlineChunkPlugin

I've been attempting to use https://www.npmjs.com/package/html-webpack-inline-chunk-plugin to inline the webpack runtime, and was finding that the changes made by that plugin were not being persisted into the generated HTML.

Some debugging identified that the modification of script tags during the html-webpack-plugin-alter-asset-tags event is only relevant when using HtmlWebpackPlugin's native script tag injection, which is necessarily disabled for the use of this template.

I'm not blaming anyone or suggesting a change, I just wanted to document this publicly to maybe save some future head-scratching. The workaround is to use https://www.npmjs.com/package/inline-manifest-webpack-plugin as suggested by this template's README.

The html contains some ES6 Template String will throw errors.

RT,
When the template html contains some scripts and it contains some Template String like some prefix ${varFoo} some suffix will throw error varFoo not defined.

`peerDependency` points to a non-existent version -> no way to install on npm 3

Your package has set

  "peerDependencies": {
    "html-webpack-plugin": "2.x"
  }

The problem is that html-webpack-plugin doesn't have a 2.x version available yet. This causes the installation of html-webpack-template to fail on npm 3.

Any way to use html-webpack-template to generate Static Site?

Hey Jake,

I was wondering if there was any way to use html-webpack-template to prerender my index.html page. I've come across other Webpack plugins like 'static-jsx-webpack-plugin', 'static-site-generator-webpack-plugin', and others which I'd like to use alongside this plugin.

Any suggestions on how to proceed?

Thanks,
Michael

Switch to using 'inject: true' and not duplicating upstream functionality

The upstream html-webpack-plugin plugin used to include most logic in the actual template file, however in v2.29.0 switched to injecting the relevant markup into the template using JS (see jantimon/html-webpack-plugin@c8a6925).

Currently html-webpack-template must be used with that JS injection mode turned off (inject: false), since it instead re-implements much of the upstream functionality in the custom index.ejs.

This results in a few issues:

it breaks the plugin/event functionality of html-webpack-plugin (as noted in #48), which will become increasingly important as more plugins become available.
it means the upstream functionality has to be re-implemented/duplicated here, and this package doesn't automatically benefit from any bug fixes/new features from upstream (which are likely more frequent given the popularity of the upstream package).
it means there's a chance for slight behaviour differences for the features that exist both in upstream and this template, which could cause confusion when people switch between the two.

I would propose:

updating the docs here to say to use inject: true (this will require a major version bump)
removing the parts of index.ejs that are handled upstream, leaving just the custom funcationality

As an added bonus these changes will make it clearer what functionality this custom template adds, and then if in the future any of those features are upstreamed, this package can be simplified even further :-)

Thoughts? (If this sounds like something that would be accepted, I'm happy to open a PR.)

bodyHtmlSnippet not working for me

I have the following definition in my webpack config:

      new HtmlWebpackPlugin({
        inject: false,
        template: require('html-webpack-template'),
        links: [
         {rel: "stylesheet", 
           href: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css", 
          integrity: "sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u", 
          crossorigin: "anonymous"}, 
          {rel: "stylesheet", 
            href: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css",  
            integrity: "sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp",  
            crossorigin: "anonymous"}, 
          {rel: "stylesheet", 
            href: "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",          
           crosorigin: "anonymous"}, 
          {rel: "icon", type: "image/png", sizes: "32x32", href: "/favicon-32x32.png"}
        ],
        scripts: [
          {src: "https://code.jquery.com/jquery-3.2.1.min.js",
             integrity: "sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=", 
            crossorigin: "anonymous"}, 
          {src: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js",
             integrity: "sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa",
             crossorigin: "anonymous"}
        ],
        title: options.title,
        appMountId: options.appMountId,
        bodyHtmlSnippet: "<div id='demo'></div>"
      })

The "options" values are specified when this is called:

  parts.indexTemplate({
    title: 'Free Code Camp Exercises',
    appMountId: 'app'
  }),

Builds to webpack-dev-server and production all complete with no errors and I am able to display the app.

All parameters work just fine except, the body-snippet is not added.

What am I doing wrong?

Rename index.html to index.ejs

Hey,

could you please rename the index.html in something else e.g. index.ejs.
Otherwise the html-loader might kick in and take over the parsing which would result in not executing the lodash template code.

Also the inject option is set to true by default now - so you might also add inject: false to the example in your readme.

Thanks
Jan

jaketrent / html-webpack-template Goto Github PK

html-webpack-template's People

Stargazers

Watchers

Forkers

html-webpack-template's Issues

What's happen

Solution

common.html

code

Description

Description

Solutions I've tried

Beta version

Recommend Projects

Recommend Topics

Recommend Org