使用html-webpack-plugin对HTML文件进行预处理

作者：System 时间：2024年08月21日分类：所有,html 字数：844

这篇文章距离上次修改已过258天，其中的内容可能已经有所变动。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入html-webpack-plugin

module.exports = {
  // ... 其他webpack配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 指定原始的HTML文件
      filename: 'index.html', // 生成的HTML文件名
      inject: 'body', // 将js脚本注入到body底部
      // 如果需要修改原始HTML，可以在这里添加自定义处理逻辑
      // 例如，添加自定义head标签或者修改title等
      // 下面是一个简单的例子，添加一个meta标签
      head: {
        meta: {
          charset: { charset: 'utf-8' },
          viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'
        }
      }
    })
  ]
  // ... 其他webpack配置
};

这段代码展示了如何使用html-webpack-plugin来处理HTML文件。在webpack配置中，我们通过new HtmlWebpackPlugin()创建了一个插件实例，并指定了一些选项，如原始HTML模板路径、输出文件名以及脚本注入位置。我们还演示了如何通过head选项来添加或修改HTML文件的head部分。这是一个非常基础的例子，实际项目中可能需要更复杂的配置来满足具体的需求。

使用html-webpack-plugin对HTML文件进行预处理

评论已关闭

推荐阅读