A webpack plugin for converting external script files <script src="app.js"></script> to inline script block <script>...</script>. Requires html-webpack-plugin to work.
Inspired by react-dev-utils created by Facebook.
npm i html-inline-script-webpack-plugin -Dyarn add html-inline-script-webpack-plugin -Dnpm i html-inline-script-webpack-plugin@^1 -Dyarn add html-inline-script-webpack-plugin@^1 -DBy default, the plugin will convert all the external script files to inline script block.
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin'); module.exports = { plugins: [new HtmlWebpackPlugin(), new HtmlInlineScriptPlugin()], };Below are lists of options supported by this plugin:
| Name | Description | Type |
|---|---|---|
| scriptMatchPattern | List of script files that should be processed and inject as inline script. This will be filtered using the output file name. | RegExp[] |
| htmlMatchPattern | List of HTML template files that should be processed by this plugin. Useful when you have multiple html-webpack-plugin initialized. This will be filtered using the options?.filename provided by html-webpack-plugin. | RegExp[] |
Here are some examples illustrating how to use these options:
const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin'); module.exports = { plugins: [ new HtmlWebpackPlugin(), new HtmlInlineScriptPlugin({ scriptMatchPattern: [/runtime~.+[.]js$/, /app~.+[.]js$/], }), ], };const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin'); module.exports = { plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: 'static/index.webos.html', }), new HtmlWebpackPlugin({ filename: 'page2.html', template: 'page2.html', }), new HtmlInlineScriptPlugin({ htmlMatchPattern: [/index.html$/], }), ], };const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin'); module.exports = { plugins: [ new HtmlWebpackPlugin({ filename: 'index.html', template: 'static/index.webos.html', }), new HtmlWebpackPlugin({ filename: 'page2.html', template: 'page2.html', }), new HtmlInlineScriptPlugin({ scriptMatchPattern: [/runtime~.+[.]js$/, /app~.+[.]js$/], htmlMatchPattern: [/index.html$/], }), ], };