如何通过Webpack向HTML中添加带完整HTTP路径的<script>标签？

嘿，要给Webpack打包后的HTML添上<script src="http://localhost:35729/livereload.js"></script>这个外部脚本标签，这几个现成的插件绝对能满足需求：

• html-webpack-plugin：这绝对是Webpack处理HTML场景的首选工具，灵活性拉满。你有两种简单的实现方式：

  1. 直接在你的HTML模板文件里手动插入这个脚本标签，插件会自动帮你处理并输出到最终的打包HTML文件中；
  2. 通过插件的配置项自动注入，新版本的html-webpack-plugin支持scripts参数，能直接添加外部脚本，举个配置例子：

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  
  module.exports = {
    // 你的其他Webpack配置
    plugins: [
      new HtmlWebpackPlugin({
        template: './src/index.html', // 你的源HTML模板
        scripts: [
          { src: 'http://localhost:35729/livereload.js', defer: true } // 配置外部脚本
        ]
      })
    ]
  };
  

• html-webpack-tags-plugin：作为html-webpack-plugin的“黄金搭档”，它能让你更精细地控制要添加到HTML里的资源。比如你可以指定脚本插入的位置（是放在<head>还是<body>末尾），配置起来也很直观：

  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const HtmlWebpackTagsPlugin = require('html-webpack-tags-plugin');
  
  module.exports = {
    // 你的其他Webpack配置
    plugins: [
      new HtmlWebpackPlugin({ template: './src/index.html' }),
      new HtmlWebpackTagsPlugin({
        scripts: ['http://localhost:35729/livereload.js'],
        append: false // false表示把脚本插入到<head>标签内，true则是<body>末尾
      })
    ]
  };
  

另外提个小建议：这个livereload脚本一般只在开发环境用到，你可以借助Webpack的环境变量做条件配置，避免生产环境打包时不小心带上它。比如：

module.exports = (env) => {
  const basePlugins = [new HtmlWebpackPlugin({ template: './src/index.html' })];
  // 只有开发环境才添加这个插件
  if (env?.development) {
    basePlugins.push(
      new HtmlWebpackTagsPlugin({
        scripts: ['http://localhost:35729/livereload.js']
      })
    );
  }
  return {
    // 你的其他Webpack配置
    plugins: basePlugins
  };
};

内容的提问来源于stack exchange，提问作者sinbar