首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js:
<!-- index.html -->
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
// entry.js
document.write('It works.')
然后编译 entry.js 并打包到 bundle.js:
$ webpack entry.js bundle.js
打包过程会显示日志:
Hash: e964f90ec65eb2c29bb9
Version: webpack 1.12.2
Time: 54ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./entry.js 27 bytes {0} [built]
用浏览器打开 index.html 将会看到 It works. 。
接下来添加一个模块 module.js 并修改入口 entry.js:
// module.js
module.exports = 'It works from module.js.'
// entry.js
document.write('It works.')
document.write(require('./module.js')) // 添加模块
重新打包 webpack entry.js bundle.js 后刷新页面看到变化 It works.It works from module.js.
Hash: 279c7601d5d08396e751
Version: webpack 1.12.2
Time: 63ms
Asset Size Chunks Chunk Names
bundle.js 1.57 kB 0 [emitted] main
[0] ./entry.js 66 bytes {0} [built]
[1] ./module.js 43 bytes {0} [built]
Webpack 会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时,会先执行 entry.js 中的代码,其它模块会在运行 require 的时候再执行。
类型签名:async function transformWithEsbuild(code: string,filename: string,options?: EsbuildTransformOptions,inMap?: ob...
别名为什么使用别名?当你使用 VCS 资源库,你将只会得到类似于这样的版本号:从分支发布的标签获取,它看起来像 2.0 或 2.0.x。...
更新模块使用 npm update 指令。1. 更新模块注意事项更新模块只能往后面版本更新,不能往老的版本回滚更新。比如先安装了 loda...
Ant 提供一些预定义的数据类型。不要将术语“数据类型”和那些在编程语言中可用的数据类型相混淆,而是将他们视作一组已经在产品...
SVN 解决冲突Tom决定给他的工程添加一个 README 文件,于是他创建了这个文件并在其中添加了 TODO 列表。添加完成之后,该文件的...