webpack详解

为什么使用webpack？

拆包-->允许按需加载

Plugin-->适应大型项目

Loader-->定制资源包

webpack核心概念--Module

Module模块

1. js
2. css，font，images...

函数写法：

var mod1 = function() {

};

对象写法：

var mod2 =  {

    init： function() {

    }

};

立即执行函数：

var mod3 = (function(win) {

})(window);

webpack核心概念--Chunk

Chunk块

1. Many small modules combined
2. Entry Chunk，Output Chunk，Common Chunk

webpack核心概念--定位

Module Loader（模块加载器）

Module bundler（模块打包工具）

1. browserify
2. webpack

特点：

• 浏览器中加载入口及依赖
• 执行入口及依赖代码
• 分析及合成模块系统
• 生成文件束（bundle/chunk）

webpack配置

1. entry：源文件
2. output：生成文件
3. loader：编译文件
4. plugins：插件
5. resolve：文件路径指向

 编译资源

将源文件编译成浏览器能识别的代码：

1. es6-->es5
2. image-->base64
3. sass/less-->css
4. etc...

提高构建速度

1. 将大型库外链
2. 将库预先编译
3. 减少构建搜索或编译路径
4. 缓存
5. 并行

 

 

转载于:https://my.oschina.net/alan01/blog/1301815