Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/colbyfayock/html-webpack-partials-plugin

🛠 Easy HTML partials for Webpack without a custom index!
https://github.com/colbyfayock/html-webpack-partials-plugin

hacktoberfest html-webpack-plugin partials webpack

Last synced: 10 days ago
JSON representation

🛠 Easy HTML partials for Webpack without a custom index!

Host: GitHub
URL: https://github.com/colbyfayock/html-webpack-partials-plugin
Owner: colbyfayock
License: mit
Created: 2018-07-06T03:55:32.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2023-05-01T18:08:07.000Z (almost 2 years ago)
Last Synced: 2024-04-26T14:01:08.241Z (9 months ago)
Topics: hacktoberfest, html-webpack-plugin, partials, webpack
Language: JavaScript
Homepage:
Size: 826 KB
Stars: 68
Watchers: 3
Forks: 20
Open Issues: 17
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        # Partials for HTML Webpack Plugin

[![All Contributors](https://img.shields.io/badge/all_contributors-8-orange.svg?style=flat-square)](#contributors-)

⚠️ **This project is no longer actively maintained**

Extends [HTML Webpack Plugin](https://github.com/jantimon/html-webpack-plugin) to add support for partials or templates.

## Requirements

Relies on `html-webpack-plugin` 4+ (currently at beta)

## Installation

```

yarn add html-webpack-partials-plugin -D

```

or

```

npm add html-webpack-partials-plugin --save-dev

```

## Usage

Require the plugin in your webpack config:

```

const HtmlWebpackPartialsPlugin = require('html-webpack-partials-plugin');

```

Add the plugin to your webpack config as follows:

```

plugins: [

  new HtmlWebpackPlugin(),

  new HtmlWebpackPartialsPlugin({

    path: './path/to/partials/body.html'

  })

]

```

Set up your partial:

```

Hello World!

```

### Settings

| Name      | Type     | Default | Description

|:---------:|:--------:|:-------:|:----------|

| path      | String   | none    | Partial location

| inject    | Boolean  | true    | Conditionally inject your partial

| location  | String   | "body"  | HTML tag name where the the partial gets added

| priority  | String   | "low"   | "high", "low", "replace" - high/low determines if the partial gets added from the start of the location or end, while replace replaces the element completely.

| template_filename | String/String[] | "index.html" | The filename of the HTML Webpack Plugin template that the partial should be attributed to. By default this is `index.html`, the HTML Webpack Plugin default output. Additionally, passing `*` will apply the partial to all templates in the compilation. This doesn't currently work in a regex format, thus something like `*.html` will NOT work and the only functionality `*` will provide is to match all templates. You can also pass an array of strings.

| options   | Object   | {}      | Local variables/options to the given partial

The settings can either be passed in as a single object or an array of objects.

## Examples

### React App Root

Don't bother creating a custom template just to add a [React](https://reactjs.org/) root element, simply add it as a partial!

#### Set Up Your Config

Using an example of `webpack.config.js` with Babel installed:

```

const path = require('path');

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

const HtmlWebpackPartialsPlugin = require('../../');

module.exports = {

  entry: {

    main: path.join(__dirname, './main.js')

  },

  output: {

    path: path.join(__dirname, './dist'),

    filename: '[name].js'

  },

  module: {

    rules: [

      {

        test: /\.js$/,

        exclude: /node_modules/,

        use: {

          loader: 'babel-loader',

          options: {

            presets: [

              '@babel/preset-env',

              '@babel/preset-react'

            ]

          }

        }

      }

    ]

  },

  plugins: [

    new HtmlWebpackPlugin(),

    new HtmlWebpackPartialsPlugin({

      path: path.join(__dirname, './partials/body.html')

    })

  ]

};

```

#### Set Up your Partial

Add a mounting point for your application at `partials/body.html`:

```



```

#### Results

💪Now your app has something to render to!

```

  

    

    Webpack App

  

  

  


```

### Google Analytics & Google Optimize

The [recommended installation](https://support.google.com/optimize/answer/6262084?hl=en) of [Google Optimize](https://www.google.com/analytics/optimize/) alongside Google Analytics includes installing the snippet immediately after the `

.async-hide { opacity: 0 !important} 

(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;

h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};

(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;

})(window,document.documentElement,'async-hide','dataLayer',4000,

{'GTM-XXXXXX':true});

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXX-X', 'auto');

ga('require', 'GTM-XXXXXX');

ga('send', 'pageview');

```

#### Results

🙆 now you're analytics code can be easily maintained and installed in the right spot!

```

  

    

.async-hide { opacity: 0 !important} 

(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;

h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};

(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;

})(window,document.documentElement,'async-hide','dataLayer',4000,

{'GTM-XXXXXX':true});

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXX-X', 'auto');

ga('require', 'GTM-XXXXXX');

ga('send', 'pageview');

    Webpack App

  

  

  

```

### Other Examples

See a few other working examples here: https://html-webpack-partials-plugin.netlify.app/

See the source for the examples here: https://github.com/colbyfayock/html-webpack-partials-plugin/tree/master/examples

## Notes

### Determining Injection Point

Given the location and priority passed into the configuration, the plugin determines where to inject. The location is simply the name of the tag to use, where the priority is how high or how low in the tag we inject. For almost all situations, a high priority will inject immediately after the opening tag and low will inject immediately before the closing tag.

The one exception to this, if the passed in tagname is `head` with a `high` priority, the plugin will inject immediately after ``.

### Order of Injection

The order is determined simply by the order in which the partial is included in the configuration.

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

  

    
_{Colby Fayock}
💻 📖

    
_{Steven Smith}
📖

    
_{Aviv Shafir}
💻

    
_{Jim Doyle}
💻 ⚠️

    
_Septs
💻

    
_{JuFeng Zhang}
💻

    
_{Victor Vincent Taglia}
💻 📖

  

  

    
_{Dae-ho Kim}
💻

  

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!