将单独的脚本注入 HTML

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

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

如果您想在脚本上启用缓存清除，这很有帮助，这是我不想只使用 copy-webpack-plugin 和静态脚本元素的主要原因。

webpack.dev.config.js

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

webpack.prod.config.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('.');
  },  
}),

Answer 3

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

Answer 4

是的，我们可以做到这一点。我做了一些例子，希望对你有帮助。

在 webpack js 中：

const path = require('path');
const webpack = require('webpack');
const TerserPluign = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    index: './src/assets/js/index.js',
    about: './src/assets/js/about.js'
  },
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, './build'),
    // publicPath: 'my-domain/'
  },
  mode: 'none',
  module: {
    rules: [
      {
        test: /\.(jpg|png)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 60 * 1024 // max size 60 kilobytes.
          }
        }
      },
      {
        test: /\.txt/,
        type: 'asset/source',
      },
      {
        test: /\.(scss|css)$/,
        use: [
          MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'
        ]
      },
      {
        test: /\.(less)$/,
        use: [
          // 'style-loader', 'css-loader', 'less-loader'
          MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'
        ]
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [ '@babel/env'],
            plugins: [ '@babel/plugin-proposal-class-properties']
          }
        }
      },
      {
        test: /\.hbs$/,
        use: [
          'handlebars-loader'
        ]
      },
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify('development'),
        'global': {},
    }),
    new TerserPluign(), // To use reduce size of bundle files,
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css"
    }),
    new CleanWebpackPlugin({
      cleanOnceBeforeBuildPatterns: [
        '**/*',
        path.join(process.cwd(), 'dummyBuildFolder/**/*')
      ]
    }),
    new HtmlWebpackPlugin({
      title: 'Default HTML',
      filename: 'index.html',
      template: 'src/templates/index.hbs',
      description: 'this is meta description for index page',
      chunks: ['index']
    }),
    new HtmlWebpackPlugin({
      title: 'About Us HTML',
      filename: 'about.html',
      template: 'src/templates/about.hbs',
      description: 'this is meta description for about us page',
      chunks: ['about']
    })
  ]
}

上面会生成两个文件，index.html和about.html

在 index.html 中：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Default HTML</title>
    <meta name="description" content="this is meta description for index page" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script defer src="index.22a0682faed73cf496ac.js"></script>
    <link href="index.2ab526c55a3c67e01bfb.css" rel="stylesheet">
  </head>
  <body>
    <div id="my_root" />
    <div id="initialMessage"></div>
    <div id="lipsumTxtId"></div>
  </body>
</html>

在about.html

中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>About Us HTML</title>
    <meta name="description" content="this is meta description for about us page" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script defer src="about.0d3ba2ce20763dbd16dc.js"></script>
    <link href="about.352d245e3219b89be11d.css" rel="stylesheet"></head>
  <body />
</html>