​

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的时候再执行。