好用的打包工具webpack

时间:2021-07-12 15:49:12

<什么是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"]);
})