WebPack

• 对webpack的理解

将依赖包统一打包至单个Js文件，减少主网页体积及访问请求

    最近开始在看WebPack，目前的感受就是WebPack是为了单页面应用而生，为了移动端开发而生，很大程度解决了包与包之间复杂的依赖关系，将依赖包统一写在了webpack.config.js里，只要你事先用npm install在开发程序目录（任何一个上级目录也OK）下载完对应的插件包，执行webpack命令后，会将所有依赖包统一封装至bundle.js文件里。

这样子，对于单网页应用来说，主页面只管调用bundle.js，剩余的实现细节查看入口的js即可。

 用阮一峰大神的话来说，就是：

浏览器本身并不提供模块管理的机制，为了调用各个模块，有时不得不在网页中，加入一大堆script标签。这样就使得网页体积臃肿，难以维护，还产生大量的HTTP请求，拖慢显示速度，影响用户体验。

为了解决这个问题，前端的模块管理器（package management）应运而生。它可以轻松管理各种JavaScript脚本的依赖关系，自动加载各个模块，使得网页结构清晰合理。不夸张地说，将来所有的前端JavaScript项目，应该都会采用这种方式开发。

来源： http://www.ruanyifeng.com/blog/2014/09/package-management.html

 

封装引用文件的细节，提高开发效率

    对于开发人员，不需要操心引用不同种类文件的解析代码，直接require不同后缀名文件，即可调用该文件信息。只需在webpack.config.js里配置相关loader规则即可，让开发人员可以花精力到具体实现代码中。

var img1 = document.createElement("img");

img1.url = require("./small.png");

document.body.appendChild(img1);

 

 

• webpack.config.js新写法

入口

entry:'./main.js' //一般都是对应的入口js文件

出口

output:{　　filename:'bundle.js'　　}

//输出文件的名称

转换器规则

module:{

　　rules:[ //针对不同后缀名文件，发布不同规则

　　　　{

　　　　　　test:/\.css$/, //test里对应后缀名搜索的正则表达式，不可以用字符串表示

　　　　　　use:[

　　　　　　　　{loader:'style-loader'},

　　　　　　　　{loader:'css-loader'}

　　　　　　]

　　　　}

　　]

}