webpack打包工具

webpack

webpack是由facebook公司推广并维护的一套工程化工具，早先为react使用，后来应在其它框架中

核心理念是：一切文件都是资源，是资源都可以模块化打包加载

js文件是资源，css文件是资源，模板文件是资源，图片文件是资源等等，所以这些资源都可以模块化打包加载，并且webpack推荐使用commonjs规范

特点：模块化开发、打包加载

github：http://github.com/webpack/webpack

官网：http://webpackjs.org/

　　

 　　浏览器端，是异步模型，资源在服务器上，要加载完再使用

　　　　例如：最开始遵循的module transport规范 (requireJs)

　　　　　　define([m1, m2], function(m1, m2) {

　　　　　　　　在回调中使用模块

　　　　　　　　return 暴露接口

　　　　　　})

　　服务器端，是同步模型，资源就在服务器上，所以可以直接使用资源

　　　　例如：commonjs规范：

　　　　　　使用require（url） 直接使用 同步使用模块

　　　　　　module.exports暴露接口

安装

需要进行两次安装：

第一次全局安装（全局安装是为了提供指令）：

　　npm install webpack -g

　　npm install webpack-cli –g

　　npm install webpack-dev-server -g

第二次本地安装（本地安装是为了在项目开发中使用）：

　　npm install webpack

安装完成，输入webpack -v查看版本号

配置文件

webpack配置文件是webpack.config.js，要像定义接口对象一样定义配置。

通过module.exports暴露接口对象

入口文件

　　入口：所有文件开始打包的地方（引入）

　　出口：所有文件打包之后的地方（发布）

　　加载机：由于webpack只能识别js文件，除了这个类型之外的文件都不能识别，必须要借助加载机

　　插件：webpack本身不具备的功能，我们可以为webpack拓展

通过entry配置项定义入口文件（webpack最先引入最先处理的文件）

属性值：

　　字符串，表示一个文件地址

　　对象，配置多个入口文件

　　　　key表示发布之后的文件名称

　　　　value 表示文件真实地址

发布文件

webpack自身没有实现资源定位，所以我们要配置发布的文件（html中引入的文件），通过output配置，属性值是对象

　　filename定义发布后的文件名称

　　　　如果有一个入口文件，filename直接写发布的文件

　　　　如果有多个入口文件，用[name]表示文件的名称 （[name]会把entry对应的对象中的key字段替换掉）

　　path定义文件发布的地址

　　　　未定义path，默认向dist目录向下发布

　　　　定义了path，将向path目录下发布（注意：必须是绝对路径，在4.x版本中默认的路径是__dirname + '/dist/'）

　　　　　　__dirname : 文件所在的位置

　　　　　　process.cwd() : 指令执行是的位置

运行 webpack 即可发布，4.0中默认发布到dist目录下。

单个入口文件：

多个入口文件：

 

webpack服务器

webpack没有内置服务器，我们需要安装webapck-dev-server模块

跟webpack一样，提供了webapck-dev-server指令，所以要安装两次：全局安装，本地安装

　　全局安装：npm install webpack-dev-server -g

　　本地安装：npm install webpack-dev-server

安装完成，通过webapck-dev-server -v查看版本号

进入项目，输入webpack-dev-server即可启动服务器

当我们保存代码的时候，浏览器会自动刷新

启动服务器时，发布的文件地址写绝对路径

默认启动8080端口号，如果8080端口号被占用，webapck-dev-server端口号会自动加1

注意：webpack-dev-server不支持post请求

webpack-dev-server --port 端口号 指令：可以修改端口号

webpack --config "所在路径" 指令：如果webpack.config.js文件不在根目录可以使用这个指令

webpack -w 指令： 该指令可以实现实时监听文件打包更新（不能监听配置改变）

webpack -d 指令：将发布后的文件显示为源代码，方便自己检测

跨域请求代理

在本地开发中可以使用线上的数据。

webpack-dev-server支持跨域请求代理技术：

通过devServer配置项，定义webpack-dev-server的配置

port 定义端口，

host 定义域名，

open 是否自动打开浏览器

proxy 定义跨域请求代理

　　key 表示代理的请求

　　value 表示代理的配置对象

　　　　target 表示目标地址

　　　　pathRewrite 表示是否重写路径

　　　　secure 是否对https协议校验。

css文件加载机

webpack中一切资源都要模块化加载，css文件也是资源，所以也要模块化加载

webpack仅仅内置了对js资源的模块化加载，并没有实现对css资源的模块化加载，所以我们要安装css资源加载机（器）

在webpack与模块相关的配置，定义在module配置中，

加载机是加载模块的，所以定义在module配置中，通过rules属性配置加载机

　　rules属性值是数组，每一个成员代表一个加载机对象

　　　　test 表示资源特征（是正则）

　　　　loader 引入加载机的

　　　　　　css资源需要两个加载机：style-loader, css-loader

　　当引入多个加载机的时候，我们用!级联。使用加载机要本地安装

　　有多个加载机，可以使用use单独配置，use属性值为数组

图片加载机

在webpack看来图片文件也是资源，也可以模块化加载，我们要安装图片加载机，实现图片模块化加载

图片文件需要引入图片加载机：url-loader (url-loader依赖file-loader)，所以都需要本地安装。

图片加载有两种方式

　　同步加载：将图片写入js文件中，通过html5中，图片的base64编码技术实现的

　　异步加载：存储图片的地址，在使用图片时候，在异步加载图片

图片到底采用哪种方式，我们可以通过传递limit参数定义，值表示图片大小,单位是字节(b)

加载机通过query形式传递参数：

　　例如 url-loader?limit=1024 * 4；当图片大小小于等于4kb的时候，同步加载。当图片大小大于4kb的时候，异步加载

 

字体图标加载机

压缩 js

通过设置mode模式来压缩js代码：

　　production： 作为产品发布，代码压缩

　　development： 作为开发项目，代码不压缩

ES Module

ES Module是在ES6中提出的，但是被纳入了ES2016（ ES7 ）中。

引入模块：通过import引入

　　import * as M from "接口地址"   引入所有的接口，并存储在M命名空间下

　　import {} from "接口地址"   引入某些接口（解构），可以直接使用解构的接口

　　import M from "接口地址"   引入默认接口

　　css资源可以直接通过import引入， import "css地址"

暴露接口：通过export或者export default暴露

　　export 暴露接口，可以被前两种引入接口的方式引入。

　　export default 暴露默认接口，可以被第三种引入接口的方式引入。

编译ES6 | ES7也需要加载机：babel-loader 编译器 @babel/presets-es2015， @babel/presets-env

webpack  4.x版本可以编译ES6和ES Module，不需要配置加载机，在之前需要