将单独的脚本注入 HTML

Question

假设我有一个public\/index.html<\/code>文件

然后是一个名为otherScript<\/code>的单独 html 文件，它只是一个包含<script><\/code>标记的文件，其中包含一个脚本

我将如何将此脚本注入到我的public\/index.html<\/code>文件中？

我想使用new HtmlWebpackPlugin<\/code>

但在示例中它只是说：

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

Answer 1

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

并像这样使用它：

配置文件

{
  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和静态脚本元素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 中：<\/strong>

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']
    })
  ]
}