构建多页面应用——hash

这里的hash主要从两个方面来讲。一个是webpack生成的hash，另外一个是页面连接中的hash，如：http://localhost:8080/ywbk.html#restaurant中的#restaurant。后者在单页面应用的路由处理中常常用到。

webpack中的hash

webapck每次构建都会生成一个新的hash(主要用于生产环境)。

它的做用就是用来标记构建生成的状态，一般使用的过程当中，会将它注入到构建输出（生成）的文件名中。

在webpack.config.js文件中的位置以下：

...
output: {
  path: path.resolve(__dirname, 'dist/'),
  filename: isDev ? 'assets/js/[name].js' : 'assets/js/[name].[contenthash].js',
  publicPath: isDev ? config.devUrl : config.deployUrl
},
module: {
  rules: [
    ...
    {
      include: path.resolve(__dirname, 'assets/imgs/other/'),
      test: /\.(png|jpe?g|gif)$/,
      use: [
        {
          loader: 'file-loader',
          options: {
            name: isDev ? '[name].[ext]' : '[name].[hash].[ext]',
            outputPath: 'assets/imgs/'
          }
        }
      ]
    }
    ...
  ]
}
...
plugins: plugins.concat([
  new MiniCssExtractPlugin({
    filename: isDev ? 'assets/css/[name].css' : 'assets/css/[name].[contenthash].css',
    chunkFilename: isDev ? 'assets/css/[id].css' : 'assets/css/[id].[contenthash].css'
  })
  ...
])

若是项目是第一次构建，那么全部的静态资源都会被添加同一个hash，当第二构建若是有内容改变，构建生成的文件会被赋予新的hash。为了提升见构建的速度，减小构建生成没必要要的文件（若是第一次生成的文件和第二次生成的文件内容相同，那么不必从新在生成一次）。为此webpack提供了三个hash字段可供选择，分别是hash、chunkhash、contenthash。

• hash：无论内容改变与否，全部的文件都会被从新生成一遍。这是一种粗放的模式。
• chunkhash：它主要针对与webpack配置文件的entry中定义的入口文件。
• contenthash: 它主要针对的是webpack构建的过程当中，提取(或者说分离)出来的内容，如：extract-text-webpack-plugin

针对多页面应用的构建特色，使用contenthash是一个不错的选择，本文中所使用的示例wepbakck4.x-multi-page符合这个特色。css的分离，js文件的分离（webpack4的SplitChunk）。

为何要在多页面应用中使用单页面应用的hash来实现路由的控制

演示效果

很明显的一点是传统的多页面应用的业务模块每每会出现多个页面之间会有不少相同内容，这样在单击导航实现路由切换的时候，老是会看到相同的内容，这样会给用户形成一种错觉‘为何老是同一个页面’。这样的用户体验每每很差。最突出的就是包含二级导航的页面。（可参考圣捷集团的官网）

单页面应用给咱们了一个很好的启示，能够经过将这些页面结构类似的，而只有一部份内容类同的页面组合成为一个页面。

这样作的好处显而易见，减小多页面构建生成的页面数量，咱们之构建生成一级和二级页面，以及一些页面结构不多雷同的页面，而不构建生成三级页面。

优化后的示例地址

具体的实现有两种解决方案。

第一种，在每一个页面中使用一个vue（结合vue-router）的示例（也可使用，react，angular）。

第二种，本身实现对不一样hash的处理。

注：若是使用hash，在开发的时候必定要模拟一个服务器环境，直接用浏览器打开是没法实现的，浏览器控制台会提示跨域的错误。

本文所使用的示例用的是第二种方案。

具体的实现过程以下：

在生成子导航的模拟数据中添加了一个type值，

tabs: [
  {
    cn_name: '圣捷投资',
    en_name: 'SHENGJIE INVESTMENT',
    type: 'investment'
  }, {
    cn_name: '董事长致辞',
    en_name: 'CHAIRMANS SPEECH',
    type: 'speech'
  }
  ...
]

这样使用pug-loader处理生成的html对应的元素中会包含一个data-type自定义属性。参考代码以下：

<div class="tabs">
  <div class="tab-item active" data-type="finance">
    <div>互联网金融</div>
    <div>ONLINE FINANCE</div>
  </div>
  <div class="tab-item" data-type="allfinance">
    <div>全品类金融</div>
    <div>WHOLE CATEGORY FINANCE</div>
  </div>
  ...
</div>

而后，使用JavaScript经过控制触发条件，如url的hash改变，进而控制页面的展现效果。参考代码以下：

···
$('.tab-item').on('click', function() {
  var type = $(this).data('type')
  window.location.hash = type
  tab(this, type)
})
···

首先，单点击二级导航时，改变url的hash。这样作可让用户经过操做浏览器的前进和后退按钮来控制页面，此外使用浏览器的前进和后退按钮的好处是，浏览能够记录页面的状态。（只用上面的代码没法实现想要的效果）

其次，使用hashchange这个浏览器自带的监听hash改变的api（他兼容>=ie8的浏览器，因此能够放心使用）。

···
$(window).on('hashchange', function() {
  tabcheck()
})
···

经过它们，就能够轻松的实现url的hash。

为了页面呈现更好的效果，能够给页面添加一个滚动的动画，若是不使用hash在传统的页面中实现有些棘手。

那么针对页面底部的网站导航，如何结合hash来操做页面并实现一致的路由切换效果呢？

这里须要监听页面的load状态，在webpack中，使用commonjs来组织js代码块，须要注意window.load(...)无效的状况。

具体的实现就不一一介绍了，可参考demo中tabs.js文件的代码

源代码

webpack4.x multi-page

构建多页面应用系列文章

• 构建多页面应用
• 构建多页面应用——单个页面的处理
• 构建多页面应用——模板
• 构建多页面应用——静态资源
• 构建多页面应用——优化（一）
• 构建多页面应用——hash
• 构建多页面应用——优化（二）