好用的打包工具webpack

Posted 2020-08-28 叮呤

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