一、webpack的基本介绍
它是一个给js准备的一个打包工具,可以把很多的模块打包成很少的一些静态文件
webpack的特性:
1、代码分割:可以使得项目在加载的过程中只加载那些项目中当时所需要的文件
2、loader:模块可以通过loader去处理各种各样的文件(比如:js文件、css文件、less文件、sass文件、图片等等)
3、插件系统模块热更新:允许在运行时替换、添加、删除各种模块,而无需进行完全刷新加载整个页面
模块热更新特点:
a).保留在完全重新加载页面时丢失的应用程序的状态
b).只更新改变的内容,以节省开发时间
c).调整样式更加快速,几乎等同于就在浏览器调试器中更改样式
二、webpack安装和命令行
在安装webpack前,本地环境需要支持nodejs
npm install webpack -g //全局安装
npm install webpack --save-dev //项目中安装
接下来我们创建一个项目,新建一个文件夹webpackDemo
然后npm init 出一个大概的框架
在 webpackDemo目录下添加 hello.js 文件,代码如下:
function hello(str) {
alert(str)
}
hello('你好')
接下来我们使用 webpack 命令来打包这个js:
webpack hello.js bundle.js //webpack后面加的是要打包的js文件和打包完后生成的文件名。
执行以上命令会编译hello.js 文件并生成bundle.js 文件,成功后输出信息如下所示:
Hash: a41c6217554e666594cb
Version: webpack 1.13.2
Time: 53ms
Asset Size Chunks Chunk Names
bundle.js 1.43 kB 0 [emitted] main
[0] ./hello.js 39 bytes {0} [built]
然后在 webpackDemo目录下添加 index.html 文件,代码如下:
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<--引入打包好的文件-->
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
webpack 根据模块的依赖关系进行静态分析,当一个文件(模块)引入了一个文件(模块)都会被包含到 bundle.js 文件中。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。 在页面启动时,会先执行第一个js 中的代码,其它模块会在运行 require 的时候再执行。