构建多页面应用——hash

最新推荐文章于 2024-05-30 09:00:00 发布

缘自世界

最新推荐文章于 2024-05-30 09:00:00 发布

阅读量543

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： webpack4 多页面构建前端工程化前端开发

本文链接：https://blog.youkuaiyun.com/weixin_41559723/article/details/85891263

本文探讨了在多页面应用中如何利用webpack的hash进行路由控制，以提升用户体验。通过分析webpack的hash、chunkhash和contenthash，提出在多页面应用中使用chunkhash或contenthash的策略。同时，文章介绍了两种实现多页面应用hash路由的方法，并给出了具体的JavaScript代码示例，旨在减少页面重复内容，优化页面加载和切换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里的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