好用的打包工具webpack

<什么是webpack>

webpack是一个模块打包器，任何静态资源（js、css、图片等）均可以视做模块，而后模块之间也能够相互依赖，经过webpack对模块进行处理后，能够打包成咱们想要的静态资源。

gulp的打包是将js、css、图片等分开打包的，可是webpack是将全部的静态资源打包到一块儿，所以一个请求就能够了。

<webpack的特色>

·支持CommonJs（require的写法）和AMD模块，也就是说基本能够无痛迁移旧项目

·支持模块加载器和插件机制，可对模块灵活定制，特别是babel-loader,有效支持es6

·能够经过配置，打包成多个文件。有效利用浏览器的缓存功能提高性能。将公用的东西抽离出来，好比jQuery等

·将样式文件和图片等静态资源视为模块进行打包。配合loader加载器，支持sass、less等css预处理器

·内置有source map,即便打包在一块儿也方便调试

<webpack的安装>

1，先全局安装

npm install webpack -g

·webpack -w  提供watch方法，实时进行打包更新

·webpack -p 对打包后的文件进行压缩

·webpack -d 提供sourcemap,方便调试

·webpack --config 以某个config做为打包

·webpack --help 更多命令

2，再本地安装

npm init 先初始化一下，生成package.json。再安装，这样能够方便的查看依赖的文件

npm install webpack --save-dev 开发式依赖，一些打包工具，像gulp、webpack等都是开发式依赖，上线时并不须要

<webpack初体验>

好比说全部的文件打包到bundle.js中，则要在页面中引入bundle.js

webpack ./entry.js bundle.js   //编译entry.js并打包到bundle.js

<模块依赖>

·webpack会分析入口文件，解析包含依赖关系的各个文件

·这些文件（模块）都打包到bundle.js文件中

·webpack会给每一个模块分配一个惟一的id并经过这个id索引和访问模块

·页面启动时先执行entry.js代码，其余的模块会在require时懒加载

<loader加载器>

·webpack自己只能处理JavaScript模块，若是要处理其余类型的文件，就须要使用loader进行转换

·Loader能够理解为是模块和资源的转换器，能够转换任何类型（jsx、jade等）的模块

·Loader能够经过管道方式链式调用，每一个loader能够把资源转换成任意格式并传递给下一个loader，可是最后一个loader必须返回JavaScript，由于webpack只认识js。不一样的文件，使用的loader也不同

·Loader能够接受参数，以此来传递配置项给loader。

·Loader能够经过npm安装

·Loader能够经过文件扩展名（或正则表达式）绑定不一样的加载器

<加载css文件>

安装两个loader:npm install css-loader style-loader

·首先将style.css也看做一个模块

·用css-loader来读取它

·用style-loader把它内嵌到html中

在entry.js中引入：

require("css!./style.css")//至关于require("css-loader!.style.css").由于css-loader的-loader是固定的，因此通常省略-loader。
/*将原始的css经过css-loader读出来，须要传递给style-loader。因此该require还须要补充为以下所示：*/
require("style!css!./style.css")
//!至关于gulp中的流同样，从右向左依次流动

再次执行

webpack ./entry.js bundle.js   
编译entry.js引入的样式文件打包到bundle.js

 <加载图片url-loader>

url-loader会将样式中引用到的图片转为模块来处理

npm install url-loader

limit的参数意思是图片大小小于这个限制的时候，会自动启用base64编码图片

<配置文件>

·webpack在执行的时候能够经过指定的配置文件

·默认状况下会执行当前目录中的webpack.config.js，当输入webpack时，会自动寻找该文件。

·配置文件是一个node.js模块，返回一个json格式的配置信息对象

·添加配置文件，而后执行webpack --progress --colors就能够了

配置文件格式为：

var webpack = require("webpack")
module.exports = {
 entry:"./entry.js",//指定打包的入口文件，每一个键值对，就是一个入口文件。
 output:{//配置打包结果
            path:__dirname,//定义了输出的文件夹
            filename:"bundle.js"//定义了打包结果文件的名称
 },
 module:{//定义了模块的加载逻辑
         loaders:[//定义了一系列的加载器
             {test:/\.css$/,loader:"style!css"},//当须要加载的文件匹配`test`的正则时，就会使用相应的loader
　　　　　　　　{test:/\.(png|jpg)$/,loader:"url?limit=40000"},
　　　　　　　　{test:/\.js?$/,loader:"babel",exclude:/node_modules/,query:{compact:false,presets:['es2015']}}//对于全部的js文件，用babel-loader
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//进行加载，忽略node_modules下面
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//　的js文件。query表示参数，至关于
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//　url-loader的？形式。
         ]
 },
 plugins:[//插件的使用通常在webpack配置信息plugins选项中指定，咱们能够向生成的打包文件头部插入一些信息
 　　new webpack.BannerPlugin("//叮呤在学习webpack"),//向打包以后的文件头部添加注释信息
　　 new webpack.optimize.CommonChunkPlugin("common.js")//把多个模块中的公共部分，单独提取出来，单独加载
 ],
 resolve:{
     alias:{//别名，它的做用是把用户的一个请求重定向到另外一个路径
    　　　　jquery:"./js/jquery.js" //这样，在使用jQuery的组件中只须要require("jquery")便可，而再也不须要逐级去寻找jQuery的存放位置
     }
 }
}

　　·expose，若是想在前台使用打包的jQuery，须要把jQuery暴露出来，先安装该模块 npm install expose-loader --save-dev

　　eg:把$做为别名为jquery的变量暴露到全局上下文中require("expose?$!jquery")，在引入jquery的时候，把jQuery对象绑定到window的$上面

　　·entry属性可使一个对象，而对象名也就是key，会做为下面output的filename属性的name

　　entry:{

　　　　bundle1:"./entry1.js",

　　　　bundle2:"./entry2.js"

　　}

　　output:{

　　　　path:__dirname,

　　　　filename:"[name].js"//此处的[name]就表示bundle1和bundle2

　　}

　　假如bundle1和bundle2都包含有功能相同的部分，则能够把这部分提取出来

　　·公共模块。咱们利用插件能够智能的提取公共部分，以提供咱们浏览器的缓存复用

　　plugins:[

　　　　　　new webpack.optimize.CommonChunkPlugin("common.js")//把多个模块中的公共部分，单独提取出来，单独加载

　　　　　　]

　　咱们须要手动在html上加载common.js,而且是必须最早加载

 <使用es6>

 npm install babel-core --save-dev

npm install babel-loader --save-dev

npm install babel-preset-es2015

<webpack-dev-server>

npm install webpack-dev-server -g

安装好以后，执行webpack-dev-server，在当前目录启动一个express服务，会自动打包和实时刷新

<与webpack相比gulp的优点>

webpack不能够作自动部署和代码检查，webpack只是个打包工具。因此能够采用gulp与webpack混合使用的方法

var gutil = require("gulp-util");
var webpack = require("webpack");
var webpackConfig = require("./webpack.config.js");
gulp.task("webpack",function(callback){
   var myConfig = Object.create(webpackConfig);
   webpack(myConfig,function(err,stats){
      callback();
   }) 
})
gulp.task("default",function(){
　　gulp.watch("./**",["webpack"]);
})