inject-inner-webpack-plugin中文文档

站长

2022年09月17日 17:46 · 阅读数 50

inject-inner-webpack-plugin

<hr/>将内部脚本源注入HTML网页包插件输出的HTML文件的网页包插件

安装

<hr/>

npm install --save-dev inject-inner-webpack-plugin

示例

<hr/>

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>
    <!-- 此脚本标记将被输出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捆绑内容
    </script>
  </head>
  <body>
      <script src="index.js"></script>
  </body>
</html>

webpack.config.js中的条目应该是Object。仅处理具有模板选项的HtmlWebpackPlugin实例。

选项

<hr/>必须将HtmlWebpackPlugin传递到第一个参数中，第二个参数是可选的，例如：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');

new InjectInnerWebpackPlugin(HtmlWebpackPlugin, {
    context: path.resolve(__dirname, '..'),
});

第二个参数的允许值如下：

名称	类型	默认值	说明
context	{String}:字符串	Webpack Context	如果使用src/inner.js？__inline这样的相对路径，则该路径将相对于上下文
isRemainBundle	{Boolean}:布尔值	false	如果为true，则保留要输出的内部块。
scriptTag	{Function}:函数	``	自定义内部内容输出
template	{String&Array}:字符串&数组	``	指定要注入的模板

转载自:https://segmentfault.com/a/1190000040330015