A webpack plugin for converting external script files to inline script block. Requires 'html-webpack-plugin' to work.
npm install html-inline-script-webpack-plugin


!ci


A webpack plugin for converting external script files to inline script block . Requires html-webpack-plugin to work.
Inspired by react-dev-utils created by Facebook.
``bash`
npm i html-inline-script-webpack-plugin -D
`bash`
npm i html-inline-script-webpack-plugin@^1 -D
By default, the plugin will convert all the external script files to inline script block, and remove the original script file from build assets.
`js
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[] |
| assetPreservePattern | List of script files that should be preserved by this plugin after inserting them inline. This will be filtered using the output file name. | RegExp[] |
Here are some examples illustrating how to use these options:
##### Process only script files that have file name start with runtime~ and app~
`js
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$/],
}),
],
};
`
##### Process any script files but only have them inlined in index.html
`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$/],
}),
],
};
`
##### Process script files that have file name start with runtime~ and app~ and inject only to index.html
`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({
scriptMatchPattern: [/runtime~.+[.]js$/, /app~.+[.]js$/],
htmlMatchPattern: [/index.html$/],
}),
],
};
`main.js
##### Process any script files but preserve from build assets
`js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlInlineScriptPlugin = require('html-inline-script-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin(),
new HtmlInlineScriptPlugin({
assetPreservePattern: [/main.js$/],
}),
],
};
`
Thanks goes to these wonderful people:
@kmalakoff | @SorsOps |