1.0.0 • Published 6 years ago
html-webpack-import-css-plugin v1.0.0
html-webpack-import-css-plugin
Transform LINK
tag to STYLE
tag with import directive.
Origin:
<link rel="stylesheet" href="/main.css" />
Output:
<style type="text/css">@import url("/main.css");</style>
Reasons
Chrome stores stylesheets from LINK
tag to disk cache, that causes latency about 300-400 ms
to load the cache. This approach allows to avoid the behavior and force Chrome storing stylesheets to memory cache. It results as 0 ms
to load cache.
Requirements
- html-webpack-plugin
- webpack 3/4 (compatible)
Installation
NPM
npm install html-webpack-import-css-plugin -D
Yarn
yarn add html-webpack-import-css-plugin -D
How to use
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackImportCssPlugin = require("html-webpack-import-css-plugin");
module.exports = {
plugins: [
new HtmlWebpackPlugin(),
new HtmlWebpackImportCssPlugin(),
]
}