7

inject-inner-webpack-plugin中文文档

 3 years ago
source link: https://segmentfault.com/a/1190000040330015
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK