无index.js的前端项目如何添加contenthash解决缓存问题？

方案一：用Webpack适配纯静态项目 #

Webpack并非强制要求JS入口，可通过配置适配纯HTML+静态资源的项目，步骤如下：

1. 初始化项目依赖
   在项目根目录执行：

npm init -y
npm install webpack webpack-cli html-webpack-plugin html-loader mini-css-extract-plugin --save-dev

手动在src目录创建一个空的empty.js文件作为Webpack的入口载体。

2. 编写Webpack配置文件（webpack.config.js）

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/empty.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true // 打包前自动清空dist目录
  },
  module: {
    rules: [
      // 解析HTML中的静态资源引用
      {
        test: /\.html$/,
        use: ['html-loader']
      },
      // 处理图片、字体等资源，添加contenthash后缀
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'assets/[name].[contenthash][ext]'
        }
      },
      // 处理CSS并生成单独的带hash后缀的文件
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      }
    ]
  },
  plugins: [
    // 生成处理后的index.html，自动替换资源引用路径
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash].css'
    })
  ]
};

3. 添加打包命令
   在package.json的scripts字段中添加：

"scripts": {
  "build": "webpack --mode production"
}

4. 执行打包
   运行npm run build，dist目录下会生成带contenthash的静态资源，且index.html中的资源引用会自动更新为带hash的路径。

方案二：用Gulp（更轻量的纯静态项目工具） #

若觉得Webpack过重，Gulp更适合处理这类纯静态资源的哈希添加需求：

1. 初始化项目依赖

npm init -y
npm install gulp gulp-rev gulp-rev-replace gulp-htmlmin --save-dev

2. 编写Gulp配置文件（gulpfile.js）

const gulp = require('gulp');
const rev = require('gulp-rev');
const revReplace = require('gulp-rev-replace');
const htmlmin = require('gulp-htmlmin');

// 处理静态资源（图片、CSS、字体）并添加hash后缀
function processAssets() {
  return gulp.src('src/**/*.{png,jpg,gif,css,woff,woff2}')
    .pipe(rev())
    .pipe(gulp.dest('dist'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('dist/rev'));
}

// 处理HTML，替换资源引用为带hash的路径
function processHtml() {
  const manifest = gulp.src('dist/rev/rev-manifest.json');
  return gulp.src('src/index.html')
    .pipe(revReplace({manifest: manifest}))
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist'));
}

// 定义打包任务执行顺序
exports.build = gulp.series(processAssets, processHtml);

3. 执行打包
   运行npx gulp build，dist目录下会生成带hash的静态资源，index.html中的引用也会自动替换。

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