Nodejs 求分享静态资源自动添加版本号的方案

Nodejs 求分享静态资源自动添加版本号的方案

譬如：一张图片有变动，它所对应的css里这张图片的地址自动添加版本好，同时，引用这个css文件的html也自动在引用处添加css版本号。

7 回复

Node.js 静态资源自动添加版本号的方案

在Web开发中，为了确保浏览器能够获取最新的静态资源（如CSS、JS、图片等），我们通常会在这些资源的URL中添加一个版本号或哈希值。这样，当资源发生变更时，浏览器会认为这是一个新的资源，并重新加载它，而不是使用缓存中的旧版本。

以下是一个简单的Node.js方案，用于实现静态资源自动添加版本号的功能。我们将使用webpack作为构建工具，并结合webpack-plugin-version-number插件来实现这一目标。

步骤1：安装必要的依赖

首先，你需要安装webpack和webpack-plugin-version-number插件：

npm install --save-dev webpack webpack-cli webpack-plugin-version-number

步骤2：配置Webpack

接下来，创建一个webpack.config.js文件，并进行如下配置：

const VersionNumberPlugin = require('webpack-plugin-version-number');

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: '[name].[hash].js',
  },
  plugins: [
    new VersionNumberPlugin({
      output: './dist/version.json', // 版本信息输出位置
      append: {
        index: ['[fileVersion]', '[length]'], // 在HTML中插入版本号
      },
    }),
  ],
};

步骤3：构建项目

运行以下命令构建项目：

npx webpack

步骤4：修改HTML模板

在HTML模板中，我们需要动态地插入版本号。可以使用html-webpack-plugin来实现这一点。首先安装html-webpack-plugin：

npm install --save-dev html-webpack-plugin

然后更新webpack.config.js文件：

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

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: '[name].[hash].js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
      inject: true,
      version: 'version.json', // 引入版本信息
    }),
    new VersionNumberPlugin({
      output: './dist/version.json',
      append: {
        index: ['[fileVersion]', '[length]'],
      },
    }),
  ],
};

示例HTML模板

假设你的index.html模板如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My App</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <script src="main.[hash].js"></script>
</body>
</html>

通过上述配置，每次构建后，styles.css的引用路径会被自动添加版本号，例如styles.abc123.css。同样，引入的JS文件也会被添加版本号。

总结

以上方案利用了webpack和webpack-plugin-version-number插件，实现了静态资源自动添加版本号的功能。这不仅提高了用户体验，还简化了开发过程中的缓存管理问题。


grunt-rev

为嘛文件名都加版本了，但是资源引用的地方没有更新。

我 DIY 了一个 Express 的基本结构，其中就有静态资源的的版本的管理，运行 grunt 命令，其中有

Running "rev:dist" (rev) task
dist/public/scripts/home.js >> 9d5b5ca5.home.js
dist/public/scripts/vendor.js >> 977bd20b.vendor.js
dist/public/styles/main.css >> 94c563d1.main.css

自动给资源文件加上一个前缀。

http://cnodejs.org/topic/52cad7d87a15a384666b94e8

很实用啊，大家都太有爱了。

可以加?time=xx么？不改变文件本身的后缀

Node.js 静态资源自动添加版本号方案

为了实现静态资源（如图片、CSS等）自动添加版本号的需求，可以使用一些现成的工具和库来简化这一过程。以下是一个简单的实现方案，包括使用 webpack 和 gulp 来完成这一任务。

使用 Webpack 实现版本号管理

  1. 安装依赖 首先需要安装 webpack 和 webpack-manifest-plugin：

    npm install --save-dev webpack webpack-manifest-plugin

  2. 配置 Webpack 创建一个 webpack.config.js 文件，并配置 webpack-manifest-plugin：

    const path = require('path');
const webpack = require('webpack');
const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new ManifestPlugin(),
  ],
};

  3. 构建项目 执行 webpack 命令进行构建：

    npx webpack

  4. 使用生成的 manifest 文件 构建完成后，会在 dist 目录下生成一个 manifest.json 文件，记录了每个资源文件的哈希值。你可以在 HTML 文件中引用该文件：

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="<%= HTMLWebpackPlugin.options.manifest %>">
</head>
<body>
  <script src="main.[contenthash].js"></script>
</body>
</html>

使用 Gulp 实现版本号管理

  1. 安装依赖 安装 gulp 和 gulp-rev：

    npm install --save-dev gulp gulp-rev

  2. 配置 Gulp 创建一个 gulpfile.js 文件，并配置 gulp-rev 插件：

    const gulp = require('gulp');
const rev = require('gulp-rev');

gulp.task('version-assets', function() {
  return gulp.src(['./public/**/*.css', './public/**/*.js'])
    .pipe(rev())
    .pipe(gulp.dest('./public'))
    .pipe(rev.manifest())
    .pipe(gulp.dest('./public'));
});

  3. 运行 Gulp 任务 执行 gulp version-assets 命令：

    npx gulp version-assets

  4. 更新 HTML 文件中的引用 更新 HTML 文件以引用带有版本号的资源：

    <link rel="stylesheet" href="style-[hash].css">

通过上述两种方法，你可以轻松地实现静态资源自动添加版本号的功能，确保在资源变更时浏览器能够加载最新的文件。

回到顶部