webpck从零开始（一）----入门基础

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

接下来我们简单为大家介绍 Webpack 的安装与使用。

简约打包实现原理：webpack使用前，先进行一个配置，会从一个入口文件进入，根据模块的依赖关系进行静态分析，这些文件（模块）会被包含到bundle.js文件中。webpack会给每个模块分配一个唯一的ID并通过这个ID索引和访问模块，在页面启动时，会先执行 入口文件 中的代码，其它模块会在运行 require 的时候再执行。

一、LOADER的运用分析

webpack本身只能处理JavaScript模块，如果要处理其它类型的文件，那就要借助于loader。所以如果我们需要在应用中添加css文件，就需要使用到css-loader和style-loader,他们做俩件不同的事，css-loader会遍历css文件，找到url表达式处理他们，style-loader会将原来的css代码插入到页面中的一个style标签中。姑且require CSS 文件的时候都要写 loader 前缀 !style-loader!css-loader!

二、配置文件

参考资料：http://www.runoob.com/w3cnote/webpack-tutorial.html