inject-inner-webpack-plugin中文文档

Posted 福尔摩松

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了inject-inner-webpack-plugin中文文档相关的知识，希望对你有一定的参考价值。

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

以上是关于inject-inner-webpack-plugin中文文档的主要内容，如果未能解决你的问题，请参考以下文章