This is an extension plugin for the webpack plugin html-webpack-plugin (version 3.x or 4 or higher). It allows you to embed javascript and css source inline.
You must be running webpack on node 6 or higher.
Install the plugin with npm:
$ npm install --save-dev html-webpack-inline-code-pluginRequire the plugin in your webpack config:
var HtmlWebpackInlineCodePlugin = require('html-webpack-inline-code-plugin');Add the plugin to your webpack config as follows:
plugins: [ new HtmlWebpackPlugin(), new HtmlWebpackInlineCodePlugin() ] The above configuration will actually do nothing due to the configuration defaults.
The available options are:
headTags|bodyTags:arraytagsName:string, Specifies the code extensions to use to determine. One of thescriptorstylevalues;tagsCode:stringInserted specific code.
config code
plugins: [ new HtmlWebpackPlugin(), new HtmlWebpackInlineSourcePlugin({ headTags: [{ tagName: 'script', tagCode: `var startTime = +new Date();` }], bodyTags: [{ tagName: 'script', tagCode: `var endTime = +new Date();` }] }) ] Source html code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Example</title> </head> <body> <noscript> <strong>很抱歉，如果没有启用JavaScript，此项目将无法正常运行。请启用它。</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>Build compiled code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>Example</title> <script type="text/javascript">var startTime = +new Date();</script> </head> <body> <noscript> <strong>很抱歉，如果没有启用JavaScript，此项目将无法正常运行。请启用它。</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> <script type="text/javascript">var endTime = +new Date();</script> </body> </html>