Javascript 将分离脚本注入HTML

假设我有一个

public/index.html

文件

然后是一个单独的html文件，名为

otherScript

，它只是一个包含

标记的文件，其中包含一个脚本

如何将这些脚本注入我的

public/index.html

文件

我想使用

新的HtmlWebpackPlugin

但在这个例子中，它只是说：

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

---

我看不到任何地方应该链接到

其他

html文件？

使用webpack，特别是html webpack插件，是无法做到这一点的。属性injectrefeers用于将webpack创建的所有脚本注入到您在模板属性上引用的html中

如果它是HTML文件，您可以使用名为的网页包加载器加载它，也可以使用

然后像这样使用它：

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);
}

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文件听起来像是坏习惯

如果要将脚本注入页面，我建议使用完全不同的方法

一种方法是使用

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);
}

var依赖项=[
'path/to/script/1.js'，
'path/to/script/2.js'
]
对于（var i=0；i

您可以使用该插件

如果您想在脚本上启用缓存破坏，这将非常有用，这是我不想只使用

copywebpack插件和静态脚本元素的主要原因

webpack.dev.config.js

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

new HtmlWebpackTagsPlugin({
  // this script must be loaded before all other scripts
  append: false,
  tags: ['src/myScript.js'],
  useHash: true,
  addHash: (assetPath, hash) => {
    const parts = assetPath.split('.');
    parts[parts.length - 1] = `${hash}.${parts[parts.length - 1]}`;
    return parts.join('.');
  },  
}),

webpack.prod.config.js

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

new HtmlWebpackTagsPlugin({
  // this script must be loaded before all other scripts
  append: false,
  tags: ['src/myScript.js'],
  useHash: true,
  addHash: (assetPath, hash) => {
    const parts = assetPath.split('.');
    parts[parts.length - 1] = `${hash}.${parts[parts.length - 1]}`;
    return parts.join('.');
  },  
}),

为什么不创建一个JavaScript文件呢？因为它是标签中的一个脚本。使用webpack，特别是html webpack插件，是无法做到这一点的。属性inject refeers用于将webpack创建的所有脚本注入到模板属性上的html中。“因为它在脚本标记中”不相关。不应该这样。解决了实际的问题，你就可以毫无问题地包含脚本了。@Archer你是什么意思？它在脚本标签中，因为它是一个需要注入到我的html文件中的newrelic脚本，但我不想把它放在初始html中。那么我该怎么做呢？我相信你可以在其中注入脚本。你是说绝对没有办法将代码注入html文件？使用纯Web包，不手动触摸html，不行。你可以做martin回答的事情，这是一种有效的方法。但我猜这不是你想要的方式当我将文件作为JS文件导入html脚本标记时，我得到了这个错误：
Unexpected token向我们展示一个关于JS文件外观以及如何在html上导入的示例。