webpack 模块标识符(Module Identifiers)
让我们向项目中再添加一个模块 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)的更多相关文章
- webpack模块依赖管理介绍
http://webpack.github.io/docs/ webpack is a module bundler. 是一个模块管理器 webpack可以管理模块的依赖关系,并产生可以替代这些模块的 ...
- webpack的Hot Module Replacement运行机制
使用webpack打包,难免会使用Hot Module Replacement功能,该功能能够实现修改.添加或删除前端页面中的模块代码,而且是在页面不刷新的前提下.它究竟是怎么运作的呢?本文主要从调试 ...
- webpack模块解析
前面的话 在web存在多种支持JavaScript模块化的工具(如requirejs和r.js),这些工具各有优势和限制.webpack基于从这些系统获得的经验教训,并将模块的概念应用于项目中的任何文 ...
- webpack模块机制浅析【一】
webpack模块机制浅析[一] 今天看了看webpack打包后的代码,所以就去分析了下代码的运行机制. 下面这段代码是webpack打包后的最基本的形式,可以说是[骨架] (function(roo ...
- React系列文章:Webpack模块组织关系
现代前端开发离不开打包工具,以Webpack为代表的打包工具已经成为日常开发必备之利器,拿React技术栈为例,我们ES6形式的源代码,需要经过Webpack和Babel处理,才能生成发布版文件,在浏 ...
- Webpack & The Hot Module Replacement热模块替换原理解析
Webpack & The Hot Module Replacement热模块替换原理解析 The Hot Module Replacement(HMR)俗称热模块替换.主要用来当代码产生变化 ...
- 每天记录一点:NetCore获得配置文件 appsettings.json vue-router页面传值及接收值 详解webpack + vue + node 打造单页面(入门篇) 30分钟手把手教你学webpack实战 vue.js+webpack模块管理及组件开发
每天记录一点:NetCore获得配置文件 appsettings.json 用NetCore做项目如果用EF ORM在网上有很多的配置连接字符串,读取以及使用方法 由于很多朋友用的其他ORM如S ...
- React: webpack模块组织关系
现代前端开发离不开打包工具,以 webpack 为代表的打包工具已经成为日常开发必备之利器,拿 React 技术栈为例,我们 ES6 形式的源代码,需要经过 webpack 和 Babel 处理,才能 ...
- webpack里的module选项配置
webpack里的module 有loaders选项和noParse选项,noParse选项配置不需要解析的目录和文件 module:{ loaders:[], noParse: [ path.joi ...
随机推荐
- SQL语句(四)可视化创建和修改表
可视化创建修改表 数据库(teaching)->表->新建表 数据库(teaching)->表->(右键)设计->CHECK约束->添加---->标识(名称) ...
- C++字符串(srtring)反转
对称平方数 题目描述 打印所有不超过n(n<256)的,其平方具有对称性质的数.如11*11=121. 分析: 1.首先使用函数to_string将int转化为string: 2.然后将字符串反 ...
- Extmail 批量添加邮箱用户
Extmail 设置批量添加邮箱用户 需要修改 userctl.pl 文件 修改 userctl.pl 文件 cd /var/www/extsuite/extman/tools 编辑 userc ...
- CentOS6.8配置SonarQube Scanner配合SonarQube使用
下载最新的SonarQube Scanner压缩包 https://docs.sonarqube.org/display/SCAN/Analyzing+with+SonarQube+Scanner ...
- $Miller Rabin$总结
\(Miller Rabin\)总结: 这是一个很高效的判断质数的方法,可以在用\(O(logn)\) 的复杂度快速判断一个数是否是质数.它运用了费马小定理和二次探测定理这两个筛质数效率极高的方法. ...
- 关于Laravel 迁移数据库的问题
今天在Homestead 中用 php artisan migrate 迁移数据库时出现了拒绝的情况: ***之后发现只要修改项目文件夹下面的database.php 和.env 文件中的数据库配置, ...
- String split方法与Guava Splitter用法区别
String split方法与Guava Splitter用法区别 今天同事写了一段使用String split方法的代码,如下所示,同事期望得到的是字符"1",但是没想到却得到空 ...
- iOS性能优化技巧
通过静态 Analyze 工具,以及运行时 Profile 工具分析性能瓶颈,并进行性能优化.结合本人在开发中遇到的问题,可以从以下几个方面进行性能优化. 一.view优化 1.不透明的View 设置 ...
- Android Studio导入系统 jar包,编译时优先于查找系统SDK
https://www.cnblogs.com/bluestorm/p/6744140.html
- Hard Negative Mning
对于hard negative mining的解释,引用一波知乎: 链接:https://www.zhihu.com/question/46292829/answer/235112564来源:知乎 先 ...