webpack怎么自动给index.html里的js文件添加hash值?

nodejs webpack by Xudong Zhang @ 2016-04-23 17:00:00

这里说的是生产环境的webpack的配置,生成带hash值的js文件比较简单,但是怎么同步更新index.html文件里的js文件使它也带上hash值呢?


我的index.html文件里面包含

<script src="/app.js"></script>

我希望生产环境的webpack build完成后自动加上hash值,大致如下:

<script src="/app.js?34793430343"></script>

然后我的webpack配置大致如下,主要是添加了一个自定义的plugin:

  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
      },
    }),
    function () {
      this.plugin('done', function(stats) {
        var hash = stats.hash;

        if (stats.hash) {
          const htmlFile = 'index.html';
          var html = fs.readFileSync(path.join(buildPath, htmlFile), 'utf8');
          var newHtmlPath = '/app.js?' + hash
          var newHtml = html.replace(
            '/app.js',
            newHtmlPath);
          fs.writeFileSync(
            path.join(buildPath, htmlFile),
            newHtml);
        }
      })
    }
  ],

其实就是在webpack build完之后,读取index.html文件,然后找到/app.js替换成/app.js?HASH_VALUE,hash值从webpack build的stat信息里取。

by Xudong Zhang @2016-05-14 21:40:16.879 +0800 CST


我来回答

Markdown格式技巧

  • 行尾添加2个空格或者添加一个空行就能换行
  • 斜体: *hello* 或者 _world_
  • 加粗: **hello** 或者 __world__
  • 代码块: 添加空行,然后代码缩进4个空格
  • 特殊字符: 用\避免转义;\*就是*本身
  • python: `__name__`可以以代码形式输出__name__
  • 一个简单的例子

切换到移动版