Question

说我有一个public/index.html文件

，然后是一个名为otherScript的单独的html文件，它只是一个包含<script>标签和脚本的文件

如何将这些脚本注入到我的public/index.html文件中？

我要使用new HtmlWebpackPlugin

但是在示例中它只是说：

new HtmlWebpackPlugin({
  template: 'public/index.html'
  inject: true
})

我看不到应该链接到other html文件的任何地方吗？

Answer 1

如果它是HTML文件，则可以使用名为raw-loader的Webpack加载器加载它，也可以使用html-loader。

并像这样使用它：

Webpack.config

{
  test: /\.html$/,
  use: 'raw-loader'
}

模块

// import file

import htmlFile from 'myfile.html';

// insert the contents of file at end of body

var body = document.getElementsByTagName('body')[0];
body.insertAdjacentHTML('beforeEnd', htmlFile);

但是，一个充满脚本标签的HTML文件听起来像是不当行为的IMO。

如果要将脚本插入页面，我建议完全使用其他方法。

一种方法是使用import或require正常导入脚本，或者您可以有一系列依赖项来像这样加载和加载它们：

var dependencies = [
    'path/to/script/1.js',
    'path/to/script/2.js'
]

for(var i = 0; i < dependencies.length; i++) {
    let script = document.createElement('script');
     script.type = 'text/javascript';
     script.src = dependencies[i];
     document.getElementsByTagName('head')[0].appendChild(script);
}

Answer 2

无法使用webpack做到这一点，特别是使用html-webpack-plugin。该属性“注入”将由webpack创建的所有脚本注入到您在“模板”属性中获得的html中。

Answer 3

您可以使用html-webpack-tags-plugin插件。

如果要在脚本上启用缓存清除，这将很有帮助，这是我不想仅使用(Session info: headless chrome=80.0.3987.122) Process finished with exit code 1和静态脚本元素的主要原因。

webpack.dev.config.js

copy-webpack-plugin

webpack.prod.config.js

new HtmlWebpackTagsPlugin({
  // this script must be loaded before all other scripts
  append: false,
  tags: ['src/myScript.js'],
}),

将单独的脚本注入HTML

3 个答案: