webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
#安装webpack需要nodejs环境,nodejs到官方下载即可,不多赘述。
npm切换到国内镜像,并使用cnpm命令,查看博主npm教程
全局安装webpack
cnpm install webpack -g
本地安装webpack
cnpm install webpack
创建项目
创建目录
mkdir app
创建js文件
在app目录中添加eguid.js文件:
document.write("hi,eguid!");
创建html文件
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="test.js" charset="utf-8"></script>
</body>
</html>
打包项目
webpack eguid.js test.js
执行这个命令会编译eguid.js文件并生成test.js文件在浏览器中打开index.html,即可看到hi,eguid!
##创建第二个js文件eguid-2.js
module.exports="hi eguid,I'm from eguid-2.js.";
##更新eguid.js文件
document.write(require("./eguid-2.js"));
##再此打包
webpack eguid.js test.js
在浏览器中打开index.html,即可看到:hi eguid,I'm from eguid-2.js.
开发模式
编译时带进度和颜色的输出
当项目逐渐变大,webpack编译时间会变长,可以通过参数让编译的输出内容带有进度和颜色。
webpack --progess --colors
##监听模式
webpack --preogress --colors --watch
开启监听模式后,编译速度会变快。原理是没有变化的模块会被缓存到内存中,有变化的文件会被重新编译
总结
webpack会根据模块的依赖关系进行静态分析,会把模块打包到一个文件中。webapckt会给每个模块分配一个唯一id,通过id索引和访问模块。在页面启动时,会先执行饿鬼道》js代码,其他模块会在运行require的时候再执行。