下载APP
登录
关闭
讲堂
算法训练营
Python 进阶训练营
企业服务
极客商城
客户端下载
兑换中心
渠道合作
推荐作者
当前播放: 20 | 文件指纹策略:chunkhash、contenthash和hash
00:00 / 00:00
标清
  • 标清
1.0x
  • 2.0x
  • 1.5x
  • 1.25x
  • 1.0x
  • 0.5x
网页全屏
全屏
00:00
付费课程,可试看

玩转webpack

共84讲 · 84课时,约900分钟
5401
免费
01 | 课程介绍
免费
02 | 内容综述
免费
03 | 为什么需要构建工具
04 | 前端构建演变之路
05 | 为什么选择webpack
06 | 初识webpack
免费
07 | 环境搭建:安装webpack
08 | webpack初体验:一个最简...
09 | 通过npm script运行webpa...
免费
10 | webpack核心概念之entry
免费
11 | webpack核心概念之output
12 | webpack核心概念之loaders
13 | webpack核心概念之plugins
14 | webpack核心概念之mode
15 | 解析ECMASCript 6和React...
16 | 解析CSS、Less和Sass
17 | 解析图片和字体
18 | webpack中的文件监听
19 | webpack中的热更新及原理...
20 | 文件指纹策略:chunkhash...
21 | HTML 、CSS和JavaScript...
22 | 自动清理构建目录产物
23 | PostCSS插件autoprefixer...
24 | 移动端CSS px自动转换成r...
25 | 静态资源内联
26 | 多页面应用打包通用方案
27 | 使用sourcemap
28 | 提取页面公共资源
29 | Tree Shaking的使用和原...
30 | Scope Hoisting使用和原...
31 | 代码分割和动态import
32 | 在webpack中使用ESLint
33 | webpack打包组件和基础库
34 | webpack实现SSR打包(上)
35 | webpack实现SSR打包(下)
36 | 优化构建时命令行的显示日...
37 | 构建异常和中断处理
38 | 构建配置包设计
39 | 功能模块设计和目录结构
40 | 使用ESLint规范构建脚本
41 | 冒烟测试介绍和实际运用
42 | 单元测试和测试覆盖率
43 | 持续集成和Travis CI
44 | 发布构建包到npm社区
45 | Git Commit规范和changel...
46 | 语义化版本(Semantic Ve...
47 | 初级分析:使用webpack内...
48 | 速度分析:使用speed-mea...
49 | 体积分析:使用webpack-b...
50 | 使用高版本的webpack和Nod...
51 | 多进程/多实例构建
52 | 多进程并行压缩代码
53 | 进一步分包:预编译资源模...
54 | 充分利用缓存提升二次构建...
55 | 缩小构建目标
56 | 使用Tree Shaking擦除无...
57 | 使用webpack进行图片压缩
58 | 使用动态Polyfill服务
59 | webpack启动过程分析
60 | webpack-cli源码阅读
61 | Tapable插件架构与Hooks设...
62 | Tapable是如何和webpack进...
63 | webpack流程篇:准备阶段
64 | webpack流程篇:模块构建...
65 | webpack流程篇:文件生成
66 | 动手编写一个简易的webpac...
67 | 动手编写一个简易的webpac...
68 | loader的链式调用与执行顺...
69 | 使用loader-runner高效进...
70 | 更复杂的loader的开发场
71 | 实战开发一个自动合成雪碧...
72 | 插件基本结构介绍
73 | 更复杂的插件开发场景
74 | 实战开发一个压缩构建资源...
75 | 商城技术栈选型和整体架构
76 | 商城界面UI设计与模块拆分
77 | React全家桶环境搭建
78 | 数据库实体和表结构设计
79 | 登录注册模块开发
80 | 商品模块开发
81 | 订单模块开发
82 | 谈谈web商城的性能优化策...
83 | 功能开发总结
84 | 结束语
本节摘要
展开

精选留言(15)

  • 2019-06-25
    看到留言里面多次提到JS没有 contenthash,想问下为什么JS没有,而css文件却有呢?
    1
    2
  • 2019-07-23
    老师,我的js里面使用contenthashbuild成功了
    'use strict';

    const path = require('path');
    const webpack = require('webpack');


    console.log(__dirname, 'dist');
    console.log(path.join(__dirname, 'dist'));
    // __dirname 当前目录 /remaineey/workspace/webpack
    module.exports = {
        entry: './src/index.js', // 单入口
        entry: { // 多入口
            index: './src/index.js',
            search: './src/search.js',
        },
        output: {
            path: path.join(__dirname, 'dist'),
            filename: '[name][contenthash:8].js',
        },
        mode: 'development',
        module: {
            rules: [
                { test: /\.js$/, use: 'babel-loader' },
                {
                    test: /\.css$/,
                    use: [
                        'style-loader',
                        'css-loader',
                    ]
                },
                {
                    test: /\.less$/,
                    use: [
                        'style-loader',
                        'css-loader',
                        'less-loader'
                    ]
                },
                {
                    test: /\.(jpeg|png|jpg)$/,
                    use: [
                        {
                            loader: 'url-loader',
                            options: {
                                limit: 333330,
                            }
                        }
                    ]
                }
            ]
        },
        // 默认是false,不开启
        // 参考: https://www.webpackjs.com/configuration/watch/
        // watch: true,
        // // 只有开启监听模式时,watch才有意义
        // watchOptions: {
        // // 不监听的文件或者文件目录,支持正则匹配
        // ignored: /node_modules/,
        // // 当第一个文件更改,会在重新构建前增加延迟。这个选项允许 webpack 将这段时间内进行的任何其他更改都聚合到一次重新构建里。以毫秒为单位
        // aggregateTimeout: 300,
        // // 通过传递 true 开启 polling,或者指定毫秒为单位进行轮询。
        // poll: 1000 // 每秒检查一次变动
        // },
        // 热替换影响了chunkhash的使用,你要确保hotModuleReplacementPlugin()函数没在生产环境下执行
        // plugins: [
        // new webpack.HotModuleReplacementPlugin()
        // ],
        devServer: {
            contentBase: './dist',
            hot: true
        }
    };
    展开
    1
  • 2019-07-14
    老师 ,你好,我好奇,同样的代码,同样的webpack 配置,同样的node ,npm版本,在不同的操作系统,windows 和 linux下,打包出来的 hash 是不是一样的
    1
    1
  • 2019-06-05
    都用contentHash有什么问题么

    作者回复: js 里面没有 contenthash 哈,图片和 css 直接用这个也是可以的

    1
    1
  • 2019-06-02
    对于chunkhassh 还是有问题的, 当我们的 entry 文件发生改变(新增或删除)的时候,原先的 chunks ID 就有可能发生变化, 所以, 建议用HashedModuleIdsPlugin根据路径生成hashid
    2
    1
  • 2019-05-31
    你好 请问已经在项目环境中了 为啥 每回都要code . 一下啊? 不太懂。能私回我吗?感觉问的太白痴,可是不问又不知道

    作者回复: code . 这个就是在命令行里打开 vscode 哈,你可以在 vscode 里把 code 加入到环境变量里去

    1
    1
  • 2019-10-26
    经过亲自实验,发现如果output name 设置为 [chunkhash:8] 就会报错

    错误信息如下:

    ERROR in chunk index [entry]
    [name]_[chunkhash:8].js
    Cannot use [chunkhash] or [contenthash] for chunk in '[name]_[chunkhash:8].js' (use [hash] instead)

    ERROR in chunk search [entry]
    [name]_[chunkhash:8].js
    Cannot use [chunkhash] or [contenthash] for chunk in '[name]_[chunkhash:8].js' (use [hash] instead)

    如果修改为 filename: '[name]_[hash:8].js' 正常,

    所以

    像图片,字体文件,css文件是不是应该是contenthash

    js文件应该是 filename: '[name]_[hash:8].js'
    展开
    2
  • 2019-10-17
    老师,能不能解释一下webpack是以什么规则分chunk的呢?是一个入口一个chunk ,然后静态资源各一个吗?但是我看项目打包出来还有其他的
  • 2019-08-24
    老师这个报错是什么原因:
    webpack-dev-server --config webpack.dev.js --open

    i 「wds」: Project is running at http://localhost:8080/
    i 「wds」: webpack output is served from /
    i 「wds」: Content not from webpack is served from D:\A项目-project\demo\my-project\dist
    events.js:174
          throw er; // Unhandled 'error' event
          ^
    展开
  • 2019-07-25
    可以每次把相应的文档复制链接给我们们,每次讲课的内容,麻烦发下webpack相应部分的链接
  • 2019-07-23
    js里面是不是也是可以有contenthash的?只不过需要注意的是
    热替换会影响影响contenthash 和 chunkhash的使用
  • 按照老师的写的,加入MiniCssExtractPlugin后报了这个错:
    > my-project@1.0.0 build C:\Users\HP\Desktop\my-project
    > webpack --config webpack.prod.js

    Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
     - configuration has an unknown property 'plugin'. These properties are valid:
       object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, externals?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, serve?, stats?, target?, watch?, watchOptions? }
       For typos: please correct them.
       For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
         Loaders should be updated to allow passing options via loader options in module.rules.
         Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
         plugins: [
           new webpack.LoaderOptionsPlugin({
             // test: /\.xxx$/, // may apply this only for some modules
             options: {
               plugin: …
             }
           })
         ]
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! my-project@1.0.0 build: `webpack --config webpack.prod.js`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the my-project@1.0.0 build script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\HP\AppData\Roaming\npm-cache\_logs\2019-07-14T03_39_18_270Z-debug.log
    展开
    1
  • 2019-07-06
    试了下,图片使用 hash 指纹,并非整个项目 hash(contenthash、chunkhash)发生改变。
    多入口时,只影响引入图片的 entry 文件、相关的 css 文件。
    ???

    作者回复: 视频里也说了图片的hash和css/js资源的hash概念不一样,图片的hash是由图片内容决定的。

    如果css/js都是使用hash作为文件指纹的话,那么某一个js或者css发生改变,所有打包出来的css/js指纹都会变化。

  • 2019-06-24
    我看了下文档,发现文档中针对 js 文件也使用了 contenthash,并非不能使用 https://webpack.js.org/guides/caching/
  • 2019-06-10
    js为什么不也用contenthash

    作者回复: 因为JS 没有 contenthash,只能从chunkhash和hadh里面选。但是hash对于js的含义是整个构建的文件指纹,每次构建有任何文件变了这个值都会变。所以js只能用chunkhash