https://github.com/nearmap/html-webpack-react-template

Write your HTML webpack plugin templates using React
https://github.com/nearmap/html-webpack-react-template

html-webpack-plugin htmlwebpackplugin react webpack

Last synced: 7 months ago
JSON representation

Write your HTML webpack plugin templates using React

• Host: GitHub
• URL: https://github.com/nearmap/html-webpack-react-template
• Owner: nearmap
• License: mit
• Created: 2018-09-14T00:23:50.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-09-17T02:52:00.000Z (over 7 years ago)
• Last Synced: 2025-02-13T14:18:23.567Z (12 months ago)
• Topics: html-webpack-plugin, htmlwebpackplugin, react, webpack
• Language: JavaScript
• Size: 104 KB
• Stars: 1
• Watchers: 14
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# html-webpack-react-template

Write your HTML webpack plugin templates using React

## Installation

```bash

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

```

## Usage

Create a module that exports a template render function:

`./src/page1.template.js`

```javascript

import React from 'react';

import renderer from 'html-webpack-react-template';

import {Styles, Scripts} from 'html-webpack-react-template/injectors';

const Html = ({scripts, styles})=> (

  

    

      Page 1

      

      

    

    

      


    

  

);


export default renderer(Html);

```

Tell the `HtmlWebpackPlugin` to use the template module.

Specify an `entrypoint` option so that the template will only inject

the scripts and styles which are required by the given `entrypoint`.

You will also need to tell the plugin to not do any injection itself.

`webpack.config.babel.js`

```javascript

import webpack from 'webpack';

import HtmlWebpackPlugin from 'html-webpack-plugin';

export default ()=> ({

  entry: {

    page1: './src/page1.js',

    page2: './src/page2.js',

  },

  plugins: [

    new HtmlWebpackPlugin({

      // Needed by the template to know what scripts and styles to use

      entrypoint: 'page1',

      template: './src/page1.template.js',

      filename: 'page1.html',

      // let the template handle injection rather than the plugin

      inject: false,

    }),

    new HtmlWebpackPlugin({

      entrypoint: 'page2',

      template: './src/page2.template.js',

      filename: 'page1.html',

      inject: false,

    })

  ]

});

```