让我们向项目中再添加一个模块 print.js

project

webpack-demo
|- package.json
|- webpack.config.js
|- /dist
|- /src
|- index.js
+ |- print.js
|- /node_modules

print.js

+ export default function print(text) {
+ console.log(text);
+ };

src/index.js

  import _ from 'lodash';
+ import Print from './print'; function component() {
var element = document.createElement('div'); // lodash 是由当前 script 脚本 import 导入进来的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+ element.onClick = Print.bind(null, 'Hello webpack!'); return element;
} document.body.appendChild(component());

再次运行构建,然后我们期望的是,只有 main bundle 的 hash 发生变化,然而……

Hash: d38a06644fdbb898d795
Version: webpack 3.3.0
Time: 1445ms
Asset Size Chunks Chunk Names
vendor.a7561fb0e9a071baadb9.js 541 kB 0 [emitted] [big] vendor
main.b746e3eb72875af2caa9.js 1.22 kB 1 [emitted] main
runtime.1400d5af64fc1b7b3a45.js 5.85 kB 2 [emitted] runtime
index.html 352 bytes [emitted]
[1] ./src/index.js 421 bytes {1} [built]
[2] (webpack)/buildin/global.js 509 bytes {0} [built]
[3] (webpack)/buildin/module.js 517 bytes {0} [built]
[4] ./src/print.js 62 bytes {1} [built]
[5] multi lodash 28 bytes {0} [built]
+ 1 hidden module

……我们可以看到这三个文件的 hash 都变化了。这是因为每个 module.id 会基于默认的解析顺序(resolve order)进行增量。也就是说,当解析顺序发生变化,ID 也会随之改变。因此,简要概括:

  • main bundle 会随着自身的新增内容的修改,而发生变化。
  • vendor bundle 会随着自身的 module.id 的修改,而发生变化。
  • runtime bundle 会因为当前包含一个新模块的引用,而发生变化。

第一个和最后一个都是符合预期的行为 -- 而 vendor 的 hash 发生变化是我们要修复的。幸运的是,可以使用两个插件来解决这个问题。第一个插件是 NamedModulesPlugin,将使用模块的路径,而不是数字标识符。虽然此插件有助于在开发过程中输出结果的可读性,然而执行时间会长一些。第二个选择是使用 HashedModuleIdsPlugin,推荐用于生产环境构建:

webpack.config.js

  const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = {
entry: {
main: './src/index.js',
vendor: [
'lodash'
]
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: 'Caching'
}),
+ new webpack.HashedModuleIdsPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'runtime'
})
],
output: {
filename: '[name].[contenthash].js',
path: path.resolve(__dirname, 'dist')
}
};

现在,不管再添加任何新的本地依赖,对于每次构建,vendor hash 都应该保持一致:

Hash: 1f49b42afb9a5acfbaff
Version: webpack 3.3.0
Time: 1372ms
Asset Size Chunks Chunk Names
vendor.eed6dcc3b30cfa138aaa.js 541 kB 0 [emitted] [big] vendor
main.d103ac311788fcb7e329.js 1.22 kB 1 [emitted] main
runtime.d2a6dc1ccece13f5a164.js 5.85 kB 2 [emitted] runtime
index.html 352 bytes [emitted]
[3Di9] ./src/print.js 62 bytes {1} [built]
[3IRH] (webpack)/buildin/module.js 517 bytes {0} [built]
[DuR2] (webpack)/buildin/global.js 509 bytes {0} [built]
[0] multi lodash 28 bytes {0} [built]
[lVK7] ./src/index.js 421 bytes {1} [built]
+ 1 hidden module

然后,修改我们的 src/index.js,临时移除额外的依赖:

src/index.js

  import _ from 'lodash';
- import Print from './print';
+ // import Print from './print'; function component() {
var element = document.createElement('div'); // lodash 是由当前 script 脚本 import 导入进来的
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
- element.onClick = Print.bind(null, 'Hello webpack!');
+ // element.onClick = Print.bind(null, 'Hello webpack!'); return element;
} document.body.appendChild(component());

最后,再次运行我们的构建:

Hash: 37e1358f135c0b992f72
Version: webpack 3.3.0
Time: 1557ms
Asset Size Chunks Chunk Names
vendor.eed6dcc3b30cfa138aaa.js 541 kB 0 [emitted] [big] vendor
main.fc7f38e648da79db2aba.js 891 bytes 1 [emitted] main
runtime.bb5820632fb66c3fb357.js 5.85 kB 2 [emitted] runtime
index.html 352 bytes [emitted]
[3IRH] (webpack)/buildin/module.js 517 bytes {0} [built]
[DuR2] (webpack)/buildin/global.js 509 bytes {0} [built]
[0] multi lodash 28 bytes {0} [built]
[lVK7] ./src/index.js 427 bytes {1} [built]
+ 1 hidden module

我们可以看到,这两次构建中,vendor bundle 的文件名称,都是 eed6dcc3b30cfa138aaa

webpack 模块标识符(Module Identifiers)的更多相关文章

  1. webpack模块依赖管理介绍

    http://webpack.github.io/docs/ webpack is a module bundler. 是一个模块管理器 webpack可以管理模块的依赖关系,并产生可以替代这些模块的 ...

  2. webpack的Hot Module Replacement运行机制

    使用webpack打包,难免会使用Hot Module Replacement功能,该功能能够实现修改.添加或删除前端页面中的模块代码,而且是在页面不刷新的前提下.它究竟是怎么运作的呢?本文主要从调试 ...

  3. webpack模块解析

    前面的话 在web存在多种支持JavaScript模块化的工具(如requirejs和r.js),这些工具各有优势和限制.webpack基于从这些系统获得的经验教训,并将模块的概念应用于项目中的任何文 ...

  4. webpack模块机制浅析【一】

    webpack模块机制浅析[一] 今天看了看webpack打包后的代码,所以就去分析了下代码的运行机制. 下面这段代码是webpack打包后的最基本的形式,可以说是[骨架] (function(roo ...

  5. React系列文章:Webpack模块组织关系

    现代前端开发离不开打包工具,以Webpack为代表的打包工具已经成为日常开发必备之利器,拿React技术栈为例,我们ES6形式的源代码,需要经过Webpack和Babel处理,才能生成发布版文件,在浏 ...

  6. Webpack & The Hot Module Replacement热模块替换原理解析

    Webpack & The Hot Module Replacement热模块替换原理解析 The Hot Module Replacement(HMR)俗称热模块替换.主要用来当代码产生变化 ...

  7. 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发

    每天记录一点:NetCore获得配置文件 appsettings.json   用NetCore做项目如果用EF  ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...

  8. React: webpack模块组织关系

    现代前端开发离不开打包工具,以 webpack 为代表的打包工具已经成为日常开发必备之利器,拿 React 技术栈为例,我们 ES6 形式的源代码,需要经过 webpack 和 Babel 处理,才能 ...

  9. webpack里的module选项配置

    webpack里的module 有loaders选项和noParse选项,noParse选项配置不需要解析的目录和文件 module:{ loaders:[], noParse: [ path.joi ...

随机推荐

  1. 【JUC】JDK1.8源码分析之ReentrantReadWriteLock

    重入锁ReentrantLock是排他锁,排他锁在同一时刻仅有一个线程可以进行访问,但是在大多数场景下,大部分时间都是提供读服务,而写服务占有的时间较少.然而读服务不存在数据竞争问题,如果一个线程在读 ...

  2. 大量界面刷新时手动Dispose也是有必要的

    在winform窗体上拖一个flowLayoutPane,一个Button,项目中再创建一个用户控件UcControl,用户控件上放几十个子控件 private void button1_Click( ...

  3. Dom4j工具类源码解析

    话不多说,上源码: package com.changeyd.utils;import java.io.File;import java.io.FileNotFoundException;import ...

  4. Jsp (Java Server Pages)相关知识九大内置对象和四大作用域

    一.初识JSP Jsp页面的组成:静态内容.指令.表达式.小脚本.声明.标准动作.注释等元素构成 Url:统一资源定位符 Url组成:协议.主机名(包括端口号).路径 1.注释的方式: 1.HTML注 ...

  5. [C++]指针/指针数组/数组指针/多维指针/单值指针/多值指针

    int main(){ //单值指针(指向单个值得指针,类同普通变量) int *px = new int; *px = 100; printf("%d",*px); delete ...

  6. JavaScript之字符串匹配工具[插件]

    /*** * StringCheckUtil * 字符串检测工具 * * @version 1.0 * @method isNum(string,scope) * @method isChinese( ...

  7. luogu P3522 [POI2011]TEM-Temperature

    这道题暴力做法就是枚举每个起点,然后向后拓展到不能拓展 就像这样(红框是每个位置的取值范围,绿线是你取的值构成的折线) 应该可以发现,左端点往右移的过程中,右端点也只能不动或往右移,所以我们可以每次移 ...

  8. 第16月底18天 phpstudy设置

    1.phpstudy设置-端口常规设置 E:\phpStudy\Apache\bin>httpd.exeAH00526: Syntax error on line 14 of E:/phpStu ...

  9. Python 入门基础17 --加密、表格、xml模块

    今日内容: 1.hashlib模块:加密 2.hmac模块:加密 3.configparser模块:操作配置文件 4.subprocess模块:操作shell命令 5.xlrd模块:excel 6.x ...

  10. wFuzz使用帮助

    ******************************************************** * Wfuzz 2.0 - The Web Bruteforcer * ******* ...