{"id":17300888,"url":"https://github.com/kyleohc/inline-source-webpack-plugin","last_synced_at":"2025-04-14T11:15:27.112Z","repository":{"id":45993261,"uuid":"143240998","full_name":"KyLeoHC/inline-source-webpack-plugin","owner":"KyLeoHC","description":"A webpack plugin to embed css/js resource in the html.","archived":false,"fork":false,"pushed_at":"2022-10-23T17:53:33.000Z","size":544,"stargazers_count":24,"open_issues_count":1,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-14T11:14:55.714Z","etag":null,"topics":["inline","inline-css","inline-javascript","inline-source","webpack-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KyLeoHC.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-02T04:08:54.000Z","updated_at":"2023-08-24T03:03:51.000Z","dependencies_parsed_at":"2022-08-25T09:21:36.295Z","dependency_job_id":null,"html_url":"https://github.com/KyLeoHC/inline-source-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KyLeoHC%2Finline-source-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KyLeoHC%2Finline-source-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KyLeoHC%2Finline-source-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KyLeoHC%2Finline-source-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KyLeoHC","download_url":"https://codeload.github.com/KyLeoHC/inline-source-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248868766,"owners_count":21174758,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["inline","inline-css","inline-javascript","inline-source","webpack-plugin"],"created_at":"2024-10-15T11:30:49.702Z","updated_at":"2025-04-14T11:15:27.059Z","avatar_url":"https://github.com/KyLeoHC.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca href=\"https://www.npmjs.com/package/inline-source-webpack-plugin\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/inline-source-webpack-plugin.svg\" alt=\"npm Version\"\u003e\u003c/a\u003e\n[![Build Status](https://travis-ci.org/KyLeoHC/inline-source-webpack-plugin.svg?branch=master)](https://travis-ci.org/KyLeoHC/inline-source-webpack-plugin)\n![Codecov](https://img.shields.io/codecov/c/github/KyLeoHC/inline-source-webpack-plugin)\n\n# inline-source-webpack-plugin\n\nA 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).\n\n## Install\n\n```bash\n$ npm i inline-source-webpack-plugin -D\n```\n\n## example\n\n```html\n\u003c!-- ./demo/src/index.html --\u003e\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"\u003e\n    \u003ctitle\u003etest\u003c/title\u003e\n    \u003clink href=\"inline.css\" inline=\"true\"\u003e\n    \u003cscript src=\"inline.js\" inline=\"true\"\u003e\u003c/script\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv class=\"container\"\u003e\n      \u003ch1\u003ehello world!\u003c/h1\u003e\n    \u003c/div\u003e\n    \u003c!-- 'inline-asset' attribute tell us to embed file that generated by webpack --\u003e\n    \u003cscript inline inline-asset=\"runtime\\.\\w+\\.js$\" inline-asset-delete\u003e\u003c/script\u003e\n    \u003cscript inline inline-asset=\"bundle\\.\\w+\\.js$\" inline-asset-delete\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nYou can find this demo in the demo directory and view the output:\n\n```bash\n# install dependency\nnpm i\n\n# build demo\nnpm run build:demo\n```\n\n## Usage\n\nAvailable options include(refer to [this](https://github.com/popeindustries/inline-source#usage) for more options):\n\n- `compress`: enable/disable compression.(default `false`)\n- `rootpath`: path used for resolving inlineable paths.\n- `noAssetMatchReplace`: work with `noAssetMatch` option.(default `\u003c!-- --\u003e`)\n- `noAssetMatch`: define the behaviour while no asset match the value of `inline-asset` attribute.(default `none`)\n  - `none`: do nothing and the tag is still reserved in the html.\n  - `warn`: throw warning tips and replace the tag with the content of `noAssetMatchReplace` option.\n  - `error`: throw error tips and replace the tag with the content of `noAssetMatchReplace` option(This level will affect the compilation of webpack).\n\n```javascript\n// webpack.config.js\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst InlineSourceWebpackPlugin = require('inline-source-webpack-plugin');\n\nmodule.exports = {\n  ...,\n  plugins: [\n    new HtmlWebpackPlugin({\n      ...\n    }),\n    new InlineSourceWebpackPlugin({\n      compress: true,\n      rootpath: './src',\n      noAssetMatch: 'warn'\n    })\n  ]\n};\n```\n\nIf 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`).\nAdd `inline-asset-delete` attribute for deleting the asset after inline task.\n\n```html\n\u003cscript inline inline-asset-delete inline-asset=\"Your asset path/Your asset name\"\u003e\u003c/script\u003e\n```\n\nThe value of `inline-asset` attribute is a *regular expression*.\n\nNote: 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;\n\n## License\n\n[MIT License](https://github.com/KyLeoHC/inline-source-webpack-plugin/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyleohc%2Finline-source-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkyleohc%2Finline-source-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkyleohc%2Finline-source-webpack-plugin/lists"}