文档章节

webpack的hash问题

sunshinewyf
 sunshinewyf
发布于 2017/04/26 18:26
字数 1022
阅读 22
收藏 0
点赞 0
评论 0

webpack-demo

webpack中的hash问题

简单的项目目录如下图所示:

template

webpack中的配置文件如下的时候:

  module.exports = {
      entry: {
          'example1': './example1',
          'example2': './example2'
      },
      output: {
          filename: '[name]-[hash:8].js'
      }
  };

第一次执行webpack命令的时候,会出现下面的目录:

template2

但是当改变example1.js和example2.js中的任何一个文件的时候,然后再执行webpack,就会看到下面的目录:

template3

可以看到目录中又新添了两个文件,并且两个文件名的hash值是一样的。这里又一个弊端,就是没有改变的那个文件,也会生成一个新的hash值的文件名。这是因为hash字段是根据每次编译 compilation的内容计算得到,也就是整个文件的hash值,这样的编译方式明显不太好,没有改变的文件也会随着其他文件的改变而改变 解决上面的问题有如下几种方式:

使用chunkhash

配置文件如下所示:

module.exports = {
    entry: {
        'example1': './example1',
        'example2': './example2'
    },
    output: {
        filename: '[name]-[chunkhash:8].js'
    }
};

执行webpack之后,文件目录如下所示:

template4

改变example1.js之后,然后再执行webpack,目录结构如下所示:

template5

这样就解决了上面的问题。但是当加入css文件之后,文件目录如下:

template5

并且在a.js中引入a.css,如下所示:

require('./a.css')

webpack的配置文件如下所示:

module.exports = {
    entry: {
        'a': './a',
        'b': './b'
    },
    output: {
        filename: '[name]-[chunkhash:8].js'
    },
    module: {
        loaders:[
            {
                test: /\.css$/, // Only .css files
                use: ["style-loader", "css-loader"] // Run both loaders
            }
        ]
    }
};

执行webpack之后,目录结构变成如下:

template5

改变a.css之后再执行webpack

发现文件目录变成如下:

template5

从目录可以看出,文件打包没有打包出css文件,而且只要修改a.css,那么a.js也会发生改变,所以chunkhash在含有css依赖的时候就会有问题

contenthash

webpack配置修改如下:

const extractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');

module.exports = {
    entry: {
        'a': './a',
        'b': './b'
    },

    output:{
        filename:'[name]-[chunkhash].js'
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: extractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
        }],
    },
    plugins: [
        // 这里的 contenthash 是 ExtractTextPlugin 根据抽取输出的文件内容计算得到
        new extractTextPlugin('[name].[contenthash:4].css'),
    ],
}

执行webpack后的文件目录:

template5

然后改变a.css 文件之后,再执行webpack,可以看到文件目录如下:

template5

看到目录下只是生成了改变的新的css文件,达到目的.

使用webpackMd5Hash插件

webpack的配置如下:

const webpack = require('webpack');
const extractTextPlugin = require('extract-text-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash')

module.exports = {
    entry: {
        'a': './a',
        'b': './b'
    },

    output:{
        filename:'[name]-[chunkhash].js'
    },
    module: {
        loaders: [{
            test: /\.css$/,
            loader: extractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
        }],
    },
    plugins: [
        new extractTextPlugin('[name].[contenthash:4].css'),
        new WebpackMd5Hash()
    ],
}

文件目录如下图所示:

template5

修改a.css之后,文件目录变成如下所示:

template5

可以看出,当a.css发生改变的时候,依赖它的其他文件并没有重新生成新的hash值,所以使用webpackMd5Hash也可以解决问题 webpackMd5Hash通过模块路径来排序chunk的所有依赖模块,并将这些排序后的模块源代码拼接,最后用MD5拼接后内容的chunkhash, 但是webpackMd5Hash有一些issue,有一些坑,具体可以参见这里还有这里

图片的hash问题

在文件中难免会用到图片,比如在文件目录中,a.css文件代码如下:

a{
    font-size:14px;
    background:url('./1.png') no-repeat;
}

a.js中的文件代码如下:

require('./1.png');
require('./a.css')
require('./b.js')
var a = 'this is a';

webpack配置如下:

const webpack = require('webpack');
const extractTextPlugin = require('extract-text-webpack-plugin');
const WebpackMd5Hash = require('webpack-md5-hash')

module.exports = {
    entry: {
        'a': './a',
        'b': './b'
    },

    output:{
        filename:'[name]-[chunkhash].js'
    },
    module: {
        loaders: [
            {
            test: /\.css$/,
            loader: extractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader' })
            },
            {
                // 图片加载器,雷同file-loader,更适合图片,可以将较小的图片转成base64,减少http请求
                // 如下配置,将小于8192byte的图片转成base64码
                test: /\.(png|jpg|gif)$/,
                loader: 'url-loader?limit=1000&name=../images/[name].[ext]?[hash]',
            }
        ],
    },
    plugins: [
        new extractTextPlugin('[name].[contenthash:4].css'),
        new WebpackMd5Hash()
    ],
}

执行webpack之后,目录结构如下图所示:

template5

可以看出图片也有相对应的编译文件,当图片的大小小于1000时,就不会创建相应的imags目录,只有大于1000时才会生成。当该目录的cssjs发生改变的时候,也不会重新出现新的image

© 著作权归作者所有

共有 人打赏支持
sunshinewyf
粉丝 15
博文 97
码字总数 64205
作品 0
武汉
程序员
使用 Webpack 打包单页应用的正确姿势

前言:在现代前端工程中,模块化已经成了前端项目组织文件的标配,网站上线前都会把需要的相关模块预先打包、处理一番。然而打包的方式多种多样,如何才能最优雅的分离业务代码和依赖库、如何...

ElemeFe ⋅ 2017/12/26 ⋅ 0

Webpack实现持久缓存

持久缓存 使用webpack构建工程的时候,我们往常会把功能不同的代码打包到不同的包里(如lib,vendor,业务代码)。 而持久缓存的目的就是每一次更新线上代码的时候,尽可能使内容未做更改的模块的...

dev双皮奶 ⋅ 01/20 ⋅ 0

webpack初试

接触webpack其实已经很久了,但是真正去研究它还是第一次,所以记录一下自己的学习体验: webpack的主要功能是:Webpack 是一个前端资源加载/打包工具,只需要相对简单的配置就可以提供前端工...

sunshinewyf ⋅ 2016/07/20 ⋅ 0

妈妈再也不用担心我不会webpack了

前言 webpack前端工程中扮演的角色越来越重要,它也是前端工程化很重要的一环。本文将和大家一起按照项目流程学习使用wbepack,妈妈再也不用担心我不会使用webpack,哪里不会看哪里。这是一个...

尼古拉斯李三 ⋅ 2017/11/12 ⋅ 0

手把手带你入门webpack

本文是在windows系统下使用webpack,其他系统只有命令行工具使用方式有区别,您可放心食用。 1 什么是webpack webpack是一个前端开发打包工具。 它打包的是什么 通下面这张图片可以看出,web...

倪亚晨 ⋅ 2017/11/30 ⋅ 0

Webpack HMR 原理解析

Hot Module Replacement(以下简称 HMR)是 webpack 发展至今引入的最令人兴奋的特性之一 ,当你对代码进行修改并保存后,webpack 将对代码重新打包,并将新的模块发送到浏览器端,浏览器通过...

冉四夕 ⋅ 2017/11/08 ⋅ 0

webpack学习简单总结

webpack使用总结: 入门使用: 这个报错说明需要安装相应的Loader,并在引用时指定相应的loader 执行成功如图: chunk指相应的区块。 要是css引入正确:必须引入css-loader,要使改变的css生效...

蓓蕾心晴 ⋅ 2017/06/27 ⋅ 0

webpack使用的一些看法

最近在使用webpack来作为前端开发的自动构建工具,对webpack有一些理解,这里跟大家分享一下。 一、为什么要用webpack 一开始是处于好奇和学习的心态,但是在了解和学习的过程中发现,作为一...

subying ⋅ 2016/05/19 ⋅ 0

使用 SVG 图标: (2) 编写 webpack plugin

在上篇文章中,主要讨论了 gulp-svg-sprites 的使用以及 Icon 组件的编写。上文中我们是手动复制 SVG symbol 文件的内容粘贴到 index.html。这样操作起来十分不方便,所以在本篇文章中我们通...

⋅ 02/02 ⋅ 0

Koa2+webpack3+react+mobx+mongoose 脚手架

从最近的项目中抽离出了一套基于koa&react的脚手架,基于这套脚手架可以直接对中小型项目进行开发,上手很快。代码地址在这里 为什么需要它 市面上大多是基于react 的脚手架,能够支持一个完...

RichardBillion ⋅ 2017/09/03 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

开启Swarm集群以及可视化管理

在搭建的两台coreos服务器上开启swarm集群 前置条件: docker均开启2375端口 同一个局域网内 主服务器上安装Portainer容器 安装Portainer容器执行: docker run -d -p 9000:9000 --restart=a...

ykbj ⋅ 3分钟前 ⋅ 0

单例设计模式

1、单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例 2、饿汉式单例类 在这个类被加载时,静态变量instance会被初始化,此时类的私有构造子会被调用 饿汉式是典型...

职业搬砖20年 ⋅ 8分钟前 ⋅ 0

前端基础(四):前端国际规范收集

字数:1142 阅读时间:5分钟 前言 由于前端技术的灵活性和杂乱性,导致网上的许多解决方案不够全面甚至是完全错误,容易起到误导作用。所以,我对搜索到的解决方案往往是存疑态度。那么,如何...

老司机带你撸代码 ⋅ 10分钟前 ⋅ 0

Failed to open/create Network-VirtualBox Host-Only

虚拟机版本 : Oracle Vm VirtualBox 5.2.12 报错时机:开网卡二,重启虚拟机报错 "Failed to open/create the internal network 'HostInterfaceNetworking-VirtualBox Host-Only Ethernet Ada......

p至尊宝 ⋅ 14分钟前 ⋅ 0

三分钟学会如何在函数计算中使用 puppeteer

摘要: 使用 puppeteer 结合函数计算,可以快速的构建弹性的服务完成各种功能,包括:生成网页截图或者 PDF、高级爬虫,可以爬取大量异步渲染内容的网页、模拟键盘输入、表单自动提交、登录网...

阿里云云栖社区 ⋅ 17分钟前 ⋅ 0

springMVC接收表单时 Bean对象有Double Int Char类型的处理

前台ajax提交表单price为double类型 后台controller就介绍不到 400错误 前台 实体类: public class ReleaseMapIconConfig{ private String id; private long maxValue; private long minVal......

废柴 ⋅ 19分钟前 ⋅ 0

ZOOKEEPER安装

工作需要在ubuntu上配置了一个zookeeper集群,有些问题记录下来。 1. zookeeper以来java,所以首先要安装java。但是ubuntu系统有自带的jdk,需要通过命令切换java版本: $ sudo update-alter...

恰东 ⋅ 22分钟前 ⋅ 0

linux 进程地址空间的一步步探究

我们知道,在32位机器上linux操作系统中的进程的地址空间大小是4G,其中0-3G是用户空间,3G-4G是内核空间。其实,这个4G的地址空间是不存在的,也就是我们所说的虚拟内存空间。 那虚拟内存空间...

HelloRookie ⋅ 22分钟前 ⋅ 0

myatis #{}与${}区别及原理

https://blog.csdn.net/wo541075754/article/details/54292751

李道福 ⋅ 25分钟前 ⋅ 0

三分钟学会如何在函数计算中使用 puppeteer

摘要: 使用 puppeteer 结合函数计算,可以快速的构建弹性的服务完成各种功能,包括:生成网页截图或者 PDF、高级爬虫,可以爬取大量异步渲染内容的网页、模拟键盘输入、表单自动提交、登录网...

猫耳m ⋅ 26分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部