一天浓缩学习webpack通过

熟话说浓缩就是精华，哈哈，因此就这么简单粗暴的介绍下吧，写下的都是精华。

已经不是第一次据说webpack，可是个人起步有点晚，如今才看。开门见山~~

1.什么是webpack？

  webpack是当下最热门的前端资源模块化管理和打包工具（就是一个打包器），能够将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，还能够将须要加载的模块进行代码分离，等到实际须要的时候再进行异步加载。经过loader的转换，任何资源均可以视做模块，如COMMONJS模块 ,AMD模块，JS CSS ,JSON 等 ，它会根据模块的依赖关系进行静态分析，而后将这些模块按照指定的规则生成对应的静态资源。

2.为何要有webpack等打包器？

  日常的模块加载方式都是在<script>标签里引入，这种状况是在全局做用模式window下的，这样作的弊端就是只能按<script>的书写顺序进行加载，并且全局做用域下容易产生冲突，引入数量比较多的文件状况下难以管理。

  并且，若是单独请求每一个模块会形成请求次数过多，致使应用启动缓慢，可是，将全部文件压缩成一个文件，一次请求加载全部模块会致使流量的浪费，初始化过程缓慢。

  因此编译的时候对全部的代码进行静态分析，分析出各个模块的类型及依赖关系，而后将他们提交给适配的加载器处理，因此webpack就应运而生。

3.COMMONJS模块，AMD模块，CMD模块，UMD模块几种经常使用模块？

  Commonjs：容许模块经过require方法同步加载所需依赖的其余模式，而后经过exports或module.exports来导出须要暴露的接口。

eg： require("module");

       require("./script.js");

       export.doStuff=function(){};

       module.exports=someValue;

优势：各个模块能够进行重用，npm中已经有许多可供使用的包。

缺点：只能是同步加载的，同步就意味着阻塞加载，因此不适合在浏览器环境中，由于浏览器的资源是同步加载的，不能非阻塞的并行加载多个模块。

应用实例：nodejs

Amd模块：它是在声明模块的时候就指定全部的依赖dependencies，而且还要当作形参传到factory中，对于依赖的模块提早执行依赖前置。

eg:  define("module", ["dep1", "dep2"], function(d1, d2){ return someExportedValue; });

   require(["module", "../file"],

   function(module, file) { /* ... */ });

优势：适合异步加载模块，在浏览器环境中，而且能够并行运行多个模块。和commonjs相反。

缺点：提早加好全部依赖，代码要复杂不少。

应用实例：requirejs，curl

Cmd模块：和AMD相似，并和Commonjs也有很大的兼容性。

eg: define(function(require, exports, module){

  var $ = require('jquery');

  var Spinning = require('./spinning');

  exports.doSomething = ... module.exports = ... })

优势：容易在nodejs中运行你的代码

缺点：依赖spm打包，模块的加载逻辑比较重、

应用实例：Sea.js

Umd模块：主要解决模块定义的跨平台问题

eg:  import "jquery";

   export function doStuff() {}

   module "localModule" {}

优势：容易进行静态分析，面向将来的ES标准；

缺点：原生浏览器不支持。

4.如何使用webpack？

伪装你的电脑里面已经安装了Node.js, 而后输入：npm install webpack -g  ,能够经过webpack -h来查看安装信息。

(1).伪装建立一个项目test,进入项目路径，建立一个index.html页面，代码以下图：

(2)而后再建立一个名为：bundle.js的文件，在上图的index.html中引入它。此文件里面什么代码都不须要写。

(3)在建立一个名为entry.js的文件，不须要在index.html页面引入哟，此文件里面用来写内容。

/**entry.js**/

document.write("hello world");

(4)而后将entry.js打包进bundle.js文件中，webpack会分析入口文件，解析包含依赖关系的各个文件，而后打包到bundle.js中

webpack entry.js bundle.js

webpack打包的原理就是给每个模块都分配一个惟一的id并经过这个id索引和访问模块，启动时，会先执行entry.js里面的代码，其余模块会在运行require的时候执行。

（5）此时打开bundle.js文件查看，你就能够发现里面已经 有代码了:

（6）运行inde.html页面，在浏览器中就能够看到Hello world.

可是webpack自己是只能处理javascript模块的，若是碰到css,json等其余模块文件，就须要使用loader转换。 loader就是一个装换器，一个能够输入任何资源可是最终都会帮你转成js模块的工具。

总的来讲loader有如下几点：

   1.管道方式链式调用（容许多个文件转换，最后一定输出js文件） 。 2.loader能够同步或异步执行  3.假若在nodejs环境下，能够作任何事情  4.loader加载时能够接受传参。 

   5.能够经过文件扩展名来绑定不一样类型的文件。 6.loader是经过Npm发布和安装。7.经过定义package.json来指定，一样也能够导出一个loader来使用，命名规则是：xxx-loader。通常是什么功能就命名什么。

下面就直接来试试：

(1)在项目里面在新建一个名为：style.css的文件：输入 body{ background:green}

(2)修改entry.js  加入这一句  require("!style-loader!css-loader!./style.css")

(3)安装Loader.  npm install css-loader style-loader     先用css-loader读取它，再用style-loader将它插入页面中。

(4)从新打包:webpack entry.js bundle.js

(5)刷新index.html页面能够看到效果。

若是有错误，cmd打包时就会显示，index.html运行时，fireug也会显示的。

loader转换器还能够经过配置文件来执行哟

(1)经过往package.json里面新增配置项来完成。deDependencies

(2)在新配置个webpack.config.js文件

var webpack = require('webpack')

module.exports = {
    resolve: { fallback: path.join(__dirname, "node_modules") },
    resolveLoader: { fallback: path.join(__dirname, "node_modules") },
    entry: './entry.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {test: /\.css$/, loader: 'style!css'}
        ]
    },
    plugins:[
        new webpack.BannerPlugin('This file is created by yu')
    ]

}

(3)直接运行webpack ，刷新index.html 就能够查看效果