Convert external stylesheet to embedded stylesheet, aka document stylesheet.
<link rel="stylesheet" /> => <style>...<style/>
Require mini-css-extract-plugin and html-webpack-plugin
npm i html-inline-css-webpack-plugin -Dyarn add html-inline-css-webpack-plugin -DconstMiniCssExtractPlugin=require("mini-css-extract-plugin");constHtmlWebpackPlugin=require('html-webpack-plugin');constHTMLInlineCSSWebpackPlugin=require("html-inline-css-webpack-plugin").default;module.exports={plugins: [newMiniCssExtractPlugin({filename: "[name].css",chunkFilename: "[id].css"}),newHtmlWebpackPlugin(),newHTMLInlineCSSWebpackPlugin(),],module: {rules: [{test: /\.css$/,use: [MiniCssExtractPlugin.loader,"css-loader"]}]}}interfaceConfig{filter?: (fileName: string)=>booleanstyleTagFactory?: (params: {style: string})=>stringleaveCSSFile?: booleanreplace?: {target: stringposition?: 'before'|'after'removeTarget?: boolean}}filter?: (fileName: string)=>booleanReturn true to make current file internal, otherwise ignore current file. Include both css file and html file name.
...
newHTMLInlineCSSWebpackPlugin({filter(fileName){returnfileName.includes('main');},}),
...styleTagFactory?: (params: {style: string})=>stringUsed to customize the style tag.
...
newHTMLInlineCSSWebpackPlugin({styleTagFactory({ style }){return`<style type="text/css">${style}</style>`;},}),
...if true, it will leave CSS files where they are when inlining
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>
A target for adding the internal style sheet
Add internal style sheet before/after the target
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
<head><!-- inline_css_plugin --><style>/* some hard code style */</style></head>...
newHTMLInlineCSSWebpackPlugin({replace: {removeTarget: true,target: '<!-- inline_css_plugin -->',},}),
...<head><style>/* style from *.css files */</style><style>/* some hard code style */</style></head>