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