likes
comments
collection
share

inject-inner-webpack-plugin中文文档

作者站长头像
站长
· 阅读数 16

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}:字符串&数组``指定要注入的模板