Runjuu / Html Inline Css Webpack Plugin
Licence: mit
☄️ A webpack plugin for convert external stylesheet to the embedded stylesheet
Stars: ✭ 48
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Html Inline Css Webpack Plugin
Webpack Babel Multi Target Plugin
A Webpack plugin that works with Babel to allow differential loading - production deployment of ES2015 builds targeted to modern browsers, with an ES5 fallback for legacy browsers.
Stars: ✭ 150 (+212.5%)
Mutual labels: webpack, webpack4, webpack-plugin
Webpack.js.org
Repository for webpack documentation and more!
Stars: ✭ 2,049 (+4168.75%)
Mutual labels: webpack, webpack4, webpack-plugin
Webpack Cdn Plugin
A webpack plugin that use externals of CDN urls for production and local node_modules for development
Stars: ✭ 306 (+537.5%)
Mutual labels: webpack, webpack4, webpack-plugin
Error Overlay Webpack Plugin
Catch errors with style 💥✨
Stars: ✭ 821 (+1610.42%)
Mutual labels: webpack, webpack-plugin
Minimal React Webpack Babel Setup
The minimal React, Webpack, Babel Setup. You want to get beyond create-react-app?
Stars: ✭ 777 (+1518.75%)
Mutual labels: webpack, webpack4
Webpack Deep Scope Analysis Plugin
A webpack plugin for deep scope analysis
Stars: ✭ 589 (+1127.08%)
Mutual labels: webpack, webpack-plugin
Cloudflare Workers Webpack Plugin
Launch Cloudflare Workers to the Edge from the comfort of your build step 🚀
Stars: ✭ 18 (-62.5%)
Mutual labels: webpack, webpack-plugin
Prerender Spa Plugin
Prerenders static HTML in a single-page application.
Stars: ✭ 7,018 (+14520.83%)
Mutual labels: webpack, webpack-plugin
Webpack Common Shake
CommonJS Tree Shaker plugin for WebPack
Stars: ✭ 875 (+1722.92%)
Mutual labels: webpack, webpack-plugin
Webpack Alioss Plugin
阿里 oss-webpack 自动上传插件
Stars: ✭ 35 (-27.08%)
Mutual labels: webpack, webpack-plugin
Duplicate Package Checker Webpack Plugin
🕵️ Webpack plugin that warns you when a build contains multiple versions of the same package
Stars: ✭ 635 (+1222.92%)
Mutual labels: webpack, webpack-plugin
Webpack Demos
📦 Demos && Courses for Webpack 4
Stars: ✭ 632 (+1216.67%)
Mutual labels: webpack, webpack4
React Redux Antdesign Webpack Starter
react + redux + ant design + react-router 4 + webpack 4 starter
Stars: ✭ 44 (-8.33%)
Mutual labels: webpack, webpack4
Cordova Template Framework7 Vue Webpack
Framework7 - Vue - Webpack Cordova Template with Webpack Dev Server and Hot Module Replacement
Stars: ✭ 630 (+1212.5%)
Mutual labels: webpack, webpack4
Html Sass Babel Webpack Boilerplate
Webpack 4 + Babel + ES6 + SASS + HTML Modules + Livereload
Stars: ✭ 35 (-27.08%)
Mutual labels: webpack, webpack4
Webpack Aliyun Oss
一个webpack(version >= 4)插件，上传资源到阿里云oss。可以作为webpack插件使用，也可独立使用
Stars: ✭ 36 (-25%)
Mutual labels: webpack, webpack-plugin
Dotenv Webpack
A secure webpack plugin that supports dotenv and other environment variables and only exposes what you choose and use.
Stars: ✭ 1,022 (+2029.17%)
Mutual labels: webpack, webpack-plugin
Webpack Config Plugins
Provide best practices for webpack loader configurations
Stars: ✭ 529 (+1002.08%)
Mutual labels: webpack, webpack-plugin
html-inline-css-webpack-plugin
Convert external stylesheet to embedded stylesheet, aka document stylesheet.
<link rel="stylesheet" /> => <style>...<style/>
Require mini-css-extract-plugin and html-webpack-plugin
Install
NPM
npm i html-inline-css-webpack-plugin -D
Yarn
yarn add html-inline-css-webpack-plugin -D
Minimal example
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HTMLInlineCSSWebpackPlugin = require("html-inline-css-webpack-plugin").default;
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new HtmlWebpackPlugin(),
new HTMLInlineCSSWebpackPlugin(),
],
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
}
]
}
}
Config
interface Config {
filter?: (fileName: string) => boolean
styleTagFactory?: (params: { style: string }) => string
leaveCSSFile?: boolean
replace?: {
target: string
position?: 'before' | 'after'
removeTarget?: boolean
}
}
filter(optional)
filter?: (fileName: string) => boolean
Return true to make current file internal, otherwise ignore current file. Include both css file and html file name.
example
...
new HTMLInlineCSSWebpackPlugin({
filter(fileName) {
return fileName.includes('main');
},
}),
...
styleTagFactory(optional)
styleTagFactory?: (params: { style: string }) => string
Used to customize the style tag.
example
...
new HTMLInlineCSSWebpackPlugin({
styleTagFactory({ style }) {
return `<style type="text/css">${style}</style>`;
},
}),
...
leaveCSSFile(optional)
if true, it will leave CSS files where they are when inlining
replace(optional)
replace?: {
target: string
position?: 'before' | 'after' // default is 'before'
removeTarget?: boolean // default is false
}
A config for customizing the location of injection, default will add internal style sheet before the </head>
target
A target for adding the internal style sheet
position(optional)
Add internal style sheet before/after the target
removeTarget(optional)
if true, it will remove the target from the output HTML
Please note that HTML comment is removed by default by the
html-webpack-pluginin production mode. #16
example
<head>
<!-- inline_css_plugin -->
<style>
/* some hard code style */
</style>
</head>
...
new HTMLInlineCSSWebpackPlugin({
replace: {
removeTarget: true,
target: '<!-- inline_css_plugin -->',
},
}),
...
output:
<head>
<style>
/* style from *.css files */
</style>
<style>
/* some hard code style */
</style>
</head>
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].