webpack基础教程：（一）

1. 介绍 

1.1 webpack是更优秀的前端模块依赖管理工具。它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理。他的目标是：

• 拆分依赖树（dependency tree）为多个按需加载的chunk
• 保证快速首屏加载
• 每种静态资源都可成为模块
• 能够将第三方库视作一个模块来处理
• 能够定制模块打包器的几乎任何部分
• 大型项目的项目打包解决方案

　　1.2 既然所有资源都是模块，那如何实现模块依赖？

　　在 Webpack 当中, 所有的资源都被当作是模块。

//典型的common JS格式
require("./lib.js");
require("./style.css");
require("./style.less");
require("./template.jade");
require("./image.png");

　　1.3 关于资源加载器

　　对应各种不同文件类型的资源，Webpack有对应的模块loader

module: {
    //加载器配置
    loaders: [
        //.css 文件使用 style-loader 和 css-loader 来处理
        { test: /.css$/, loader: 'style-loader!css-loader' },
        //.js 文件使用 jsx-loader 来编译处理
        { test: /.js$/, loader: 'jsx-loader?harmony' },
        //.scss 文件使用 style-loader、css-loader 和 sass-loader 来编译处理
        { test: /.scss$/, loader: 'style!css!sass?sourceMap'},
        //图片文件使用 url-loader 来处理，小于8kb的直接转为base64
        { test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
    ]
}

 　　1.4 webpack的优势

• webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移
• 一切资源皆是模块
• 能够替代gulp/grunt等构建工具，提高开发效率
• 扩展性强，插件机制完善，特别是支持 React 热插拔（见 react-hot-loader ）的功能让人眼前一亮
• https://diamont1001.github.io/webpack-summary/

　　1.5 webpack工作原理

• Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 output对象所设置的文件。
• Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。
• 在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。