https://github.com/kyleohc/inline-source-webpack-plugin

A webpack plugin to embed css/js resource in the html.
https://github.com/kyleohc/inline-source-webpack-plugin

inline inline-css inline-javascript inline-source webpack-plugin

Last synced: about 1 month ago
JSON representation

A webpack plugin to embed css/js resource in the html.

• Host: GitHub
• URL: https://github.com/kyleohc/inline-source-webpack-plugin
• Owner: KyLeoHC
• License: mit
• Created: 2018-08-02T04:08:54.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-10-23T17:53:33.000Z (over 2 years ago)
• Last Synced: 2025-04-14T11:14:55.714Z (about 1 month ago)
• Topics: inline, inline-css, inline-javascript, inline-source, webpack-plugin
• Language: JavaScript
• Homepage:
• Size: 531 KB
• Stars: 24
• Watchers: 1
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


[![Build Status](https://travis-ci.org/KyLeoHC/inline-source-webpack-plugin.svg?branch=master)](https://travis-ci.org/KyLeoHC/inline-source-webpack-plugin)

![Codecov](https://img.shields.io/codecov/c/github/KyLeoHC/inline-source-webpack-plugin)

# inline-source-webpack-plugin

A webpack plugin to embed css/js resource in the html with inline-source module([html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) is needed).

## Install

```bash

$ npm i inline-source-webpack-plugin -D

```

## example

```html

  

    

    test

    

    

  

  

    


      
hello world!

    

    

    

    

  


```

You can find this demo in the demo directory and view the output:

```bash

# install dependency

npm i

# build demo

npm run build:demo

```

## Usage

Available options include(refer to [this](https://github.com/popeindustries/inline-source#usage) for more options):

- `compress`: enable/disable compression.(default `false`)

- `rootpath`: path used for resolving inlineable paths.

- `noAssetMatchReplace`: work with `noAssetMatch` option.(default ``)

- `noAssetMatch`: define the behaviour while no asset match the value of `inline-asset` attribute.(default `none`)

  - `none`: do nothing and the tag is still reserved in the html.

  - `warn`: throw warning tips and replace the tag with the content of `noAssetMatchReplace` option.

  - `error`: throw error tips and replace the tag with the content of `noAssetMatchReplace` option(This level will affect the compilation of webpack).

```javascript

// webpack.config.js

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

const InlineSourceWebpackPlugin = require('inline-source-webpack-plugin');

module.exports = {

  ...,

  plugins: [

    new HtmlWebpackPlugin({

      ...

    }),

    new InlineSourceWebpackPlugin({

      compress: true,

      rootpath: './src',

      noAssetMatch: 'warn'

    })

  ]

};

```

If you want to embed the files that generated by webpack or other plugin, you can use `inline-asset` attribute to filter the files(Please don't try to use `src` or `href`).

Add `inline-asset-delete` attribute for deleting the asset after inline task.

```html

```

The value of `inline-asset` attribute is a *regular expression*.

Note: For `inline-asset` feature, you may notice the 'no asset match' warning or error in developement mode as you write the regular expression for the production mode.Just ignore the 'no asset match' warning or error while in developement mode.Or you can provide `noAssetMatch` option for ignoring the warning or error;

## License

[MIT License](https://github.com/KyLeoHC/inline-source-webpack-plugin/blob/master/LICENSE)