2.0.3 • Published 3 years ago
inject-inner-webpack-plugin v2.0.3
inject-inner-webpack-plugin
Webpack Plugin that injects inner script source to HTML files of the html-webpack-plugin output
Installation
npm install --save-dev inject-inner-webpack-pluginExample
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InjectInnerWebpackPlugin = require('inject-inner-webpack-plugin');
module.exports = {
entry: {
index: './index.js',
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
}),
new InjectInnerWebpackPlugin(HtmlWebpackPlugin),
],
};index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<!-- this script tag will be replaced by inner source in output html -->
<script src="./inner.js?__inline"></script>
</head>
<body>
</body>
</html>This will generate a file dist/index.html containing the following
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack App</title>
<script>
// inner.js bundle content
</script>
</head>
<body>
<script src="index.js"></script>
</body>
</html>entry in webpack.config.js shoule be Object.
Only handle the HtmlWebpackPlugin instances which has template option.
Options
You must pass HtmlWebpackPlugin into first parameter, the second parameter is optional, for example:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
new InjectInnerWebpackPlugin(HtmlWebpackPlugin, {
context: path.resolve(__dirname, '..'),
});Allowed values of the second parameter are as follows:
| Name | Type | Default | Description |
|---|---|---|---|
context | {String} | Webpack Context | If you use the relative path like src/inner.js?__inline, the path will relative to context |
isRemainBundle | {Boolean} | false | If true then remain the inner chunks to output |
scriptTag | {Function} | | |
template | {String\|Array} | |