webpack学习篇1

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