webpack的使用

认识webpack

什么是webpack

​ webpack是一个前端的模块化打包(构建)的工具

功能：
​- 1.打包(构建)
​- 2.模块化

特点
​ webpack将一切繁杂的、重复的、机械的工作自动处理，开发者只需要关注于功能的实现的

打包(构建)

​- 1.语法转换

​ ES6--->ES5 供浏览器的解析

​ less/sass---->css 供浏览器的解析

​ TS------> ES5 供浏览器的解析

​- 2.文件压缩和合并

​ js / html /css 文件压缩，删除所有的注释和空格，变量名简写

​ js / css 文件合并 ，将多个js文件或则css文件合并成一个js文件或则css文件

​- 3.提供开发期间的服务器

​ 能够自动打开浏览器，监听文件变化，自动刷新浏览器的

模块化

​ 在webpack中，所有的资源都是模块

webpack 为前端提供了模块化开发环境，有了webpack之后，我们可以像写 NodeJS 代码一样，写前端代码。
​ 引入 js/css/图片 文件：

const Vue = require('vue')

require('./css/index.css')

require('./imgs/a.png')

​ 每个js文件都是一个独立的模块，模块之间的作用域是隔离的，需要通过导入和导出 来实现两个模块之前的数据共享
​webpack 能够识别现在前端所有的模块化语法，也就是说：不管你用的
require.js（AMD）、NodeJS（CommonJS）、ES6（import/export） 哪种语法，webpack全都认识，全都可以解析
​ webpack 不仅实现 JS 的模块化，也实现了 CSS、图片、视频 等所有前端资源，全部都可以使用模块化的方式来处理。

// CSS：
@import './common/base.css';

// CSS:
background-img: url(./imgs/a.png);

// HTML:
<img src="./imgs/a.png" />

注意点：
​ webpack 自身没有提供新的模块化语法，但是，它能够处理所有的前端模块化语法

使用webpack

初始化package.json

• 1 创建一个文件夹：webpack-basic

• 2 通过 npm init -y 初始化一个package.json文件

• 3 安装webpack：npm i -D webpack webpack-cli

• 4 在 package.json 文件中的 scripts 配置项中，添加一个脚本命令

build 表示构建、打包
webpack 入口文件路径 --output 出口文件路径

"scripts": {
  "build": "webpack ./src/js/main.js --output ./dist/bundle.js"
},

• 5 在终端中，通过 npm run build 来执行上面配置好的 build 命令
• 最终，打包好的内容就会放在 dist/bundle.js 目录中

实现依赖项加载的原理：
​ 采用的是递归的查询的方式，查找依赖项，找完所有的依赖项，然后将依赖项全部打包合并到一个文件中

打包执行的过程

问题

1.为什么 webpack 打包后，就可以在浏览器中运行了？？？
​ 答：webpack 能够识别和处理所有的 模块化 语法，能够将这些模块化语法，转化为浏览器能够执行的代码

webpack中的两个环境

(开发环境)development

​作用
​ 开发期间的环境，在项目没有上线之前使用，代码不会压缩
​配置
​ "build"："webpack ./src/js/main.js --output ./dist/bundle.js --mode development"
​特点
​ 打包的文件是未压缩的

(生产环境)production

​ 作用

​ 项目上线的时候使用，将代码打包压缩

​ 配置

"pro"："webpack ./src/js/main.js --output ./dist/bundle.js --mode production"

​ 特点

​ 打包的文件是压缩的

​ 使用的场景

​ 开发期间 npm run build

上线时 npm run pro

webpack命令行的简写

简写语法
"build"："webpack 入口文件路径 --mode 模式"
实例
"build"："webpack ./src/js/main.js --mode development"
"pro"："webpack ./src/js/main.js --mode production"

使用的命令
开发期间 命令：npm run build
上线打包 命令：npm run pro

注意点
简写模式中没有指定出口路径，服务器会默认在根目录下创建一个dist目录，存放的文件名称，和入口问文件名相同

webpack的配置文件的使用

什么叫配置文件

功能
这个文件将所有的配置项导出，webpack会读取这个配置文件，根据配置文件中的配置项，执行相应的操作
使用的步骤

• 1.在项目的根目录下创建一个webpack.config.js文件
• 2.在webpack.config.js中配置参数
• 3.完成基本配置后，到package.json文件中修改build的参数值
• 4.在终端中输入命令：npm run build

webpack.config.js的基本配置项

• 1.入口文件
  entry：path.join(__dirname,"./src/js/main.js")
• 2.出口文件
  output:{
  path:path.join(__dirname,"./src/js/main.js"),
  filename:"bundle.js"
  }
• 3.使用的模式
  mode:"development"
  在package.json配置文件中
  "build"："webpack"
  使用的命令
  npm run build

webpack-dev-server

使用的步骤

• 1.安装 npm i -D webpack-dev-server
• 2.使用webpack-dev-server
  命令行的方式
  配置文件的方式
• 3.在终端中输入命令：npm run dev
  webpack-dev-server命令行的使用
  作用
  提供了开发期间的运行服务器的环境

在package.json配置项

  "dev"："webpack-dev-server  --open  --contentBase ./src  --port  3000 --hot"

配置项说明

--open
  打开浏览器
--contentBase
  默认打开的目录
--port
  打开的端口号
--hot
  热更新

使用的命令

 npm run dev
webpack-dev-server的配置文件的使用
**作用**
  提供了开发期间的运行服务器的环境

使用的步骤 -webpack.config.js配置文件的配置项

配置项说明
  devServer
    dev-server配置
  open
    自动打开浏览器
  contentBase
    默认打开的目录
  port
    打开的端口号
  hot
    热更新
  使用的命令
    npm run dev

webpack-dev-server 做了什么？

• 1.在项目的根目录开启了一个新的服务器，这个新的服务器的地址为：http://localhsot：8080/

• 2.自动打开浏览器

• 3.打开指定的目录下的index.html

• 4.能够修改默认的端口号

• 5.热更新

• 6.自动监视文件的变化，自动刷新浏览器
  配置项功能详细描述

webpack和webpack-dev-server的区别

• wepack
  它是项目打包上线时使用的，能够将打包压缩好的文件保存到dist文件夹中，输出保存到磁盘中
• webpack-dev-server
  它提供了开发期间的服务器的环境，也能够对项目进行打包，但是不压缩代码，将打包好的文件缓存到服务器的根目录，但是不会存储到磁盘中，可以通过服务器直接读取并使用

注意点

缓存的打包的文件和入口的文件名相同

应用场景
开发期间使用webpack-dev-server，上线打包使用webpack

html-webpack-plugin插件的使用

作用

• 1.根据指定的模板，在内存中生成一个页面
• 2.在这个页面中自动引入了js/css/img/..等文件，然后在内存中将页面重构，最终渲染在浏览器的是渲染完成页面

为什么能够自动引入js/css等文件？

首先在配置项中设置了模板文件，webpack默认可以处理js的引入的，所以讲所有的引入和依赖项全都写在了main.js中，当webpack，使用模块化引入，就可以将js/css/image等文件全部打包放在了一起，然后webpack默认的又引入了这个js文件，所以到了不需要手动引入

html-webpack-plugin使用的步骤

• 1.下载安装
  1-1 安装： npm i -D html-webpack-plugin
  1-2.引入使用

• 2.webpack-config.js配置项
  2-1引入模块
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  2-2在plugin属性中指定插件
  new HtmlWebpackPlugin
  template:path.join(__dirname,"./src/js/index.html")
  )
  2-3配置项的说明
  new HtmlWebpackplugin
  添加插件的实例
  template
  指定的模板文件
  特点

• 1.如果使用了html-webpack-plugin这个插件，在处dev-server配置中，可以省略contentBase这个选项

• 2.使用了这个插件，不用在模板的html中使用sript等方式引入js/css等文件

loader的使用

打包处理非静态资源

webpack.config.js的配置项

 module{
   rules:[
     {test:正则匹配项，use:[‘使用的loader1’,‘使用的loader2’,    ...]  },
     {test:正则匹配项，use:[‘使用的loader1’,‘使用的loader2’,    ...]  },
   ]
 }

非静态资源注意点

• 1.use的执行顺序
  默认是从右往左执行的，例如['style-loader','css-loader'],会先执行css-loader，然后将结果给style-loader处理。

webpack处理静态文件（例如css）的过程

• 1.webpack会处理main.js入口文件
• 2.执行到require('index.css'),会使用引入模块方式引入文件
• 3.webpack会到webpack.config.js中，找到module中的rules这一属性，然后通过text中的正则匹配文件
• 4.找到这个文件会按照use中的loader方式处理文件
• 5.处理完成后，这个文件就生效了

css-loader

css-loader 使用的步骤

- 1.下载安装
  npm i -D style-loader css-loader
- 2.在 webpack.config.js 中，添加配置项来打包处理 CSS 文件
  
  正则的匹配项
      /\.css$/
  使用的loader
      ['style-loader','css-loader']
  配置项
      {test:'/\.css/',use:['style-loader','css-loader']}
  loader的说明
    css-loader
      读取css文件的内容，然后将读取的内容转化为一个模块
    style-loader
      读取css-loader的模块，在html的head标签中，创建一个style标签，然后将模块的内容放到这个style标签中

less-loader

  正则的匹配项
    /\.less$/
  使用的loader
    ['style-loader','css-loader','less-loader']
  配置项
    {test:'/\.css/',use:['style-loader','css-loader','less-loader']}
  loader的说明
  less-loader
    将less的内容转成编译后的css文件内容

url-loader/file-loader

url-loader

    正则的匹配项
      /\.(jpg|jpeg|png|gif)$/
    使用的loader
      'url-loader'
    配置项
{
  test:/\.(jpg|jpeg|png|gif)$/
  use:{
    loader: 'url-loader',
    options:{
      limit:8106
    }
  }
}

配置项的说明
loader
使用的模块
options
配置规则
limit字节数

file-loader

配置项
{test:/\.(png|jpg|jpeg|gif)$/,use:"file-loader"}

file-loader注意点

• 使用url-loader，一定要安装file-loader，因为url-loader依赖于file-loader，不一定要写在loader中，会自动引入
• 使用url-loader，会默认将图片转成base64格式的字节码
• 使用file-loader，会对文件名重命名

两个问题

• 为什么要将图片转成base64格式的

将文件转成base.64格式的数据能够将不同类型的格式的数据，嵌入到js文件中，打包的时候，能够将引入的图片放到js中。

• 为什么file-loade会对文件重名

使用了MD5的特征码提取，一个文件只要内容没有发生改变，MD5的特征码始终唯一且不会改变

• base64和MD5的应用场景

一般用于小图片的转换，如果一个图片文件过于庞大，无异于增加了js的大小
MD5适用于一个页面多次用到相同的图片，可能名称不同，但只需要发送一次请求图片。

细节补充

• 未设置mode时，打包的警告

mode 配置项没有指定， webpack 默认将 mode 设置为 production

打包字体

配置项

   {test：‘/\.(eot|svg|ttf|woff|woff2|otf)$/’,use('url-loader')}

打包字体使用的步骤

• 1 安装： npm i -D url-loader file-loader
• 2 在 webpack.config.js 中添加规则
  字体图标的使用：
  1 导入 字体图标 库的样式
  2 在 index.html 页面中，给元素添加 字体图标 提供的样式名称

处理ES6以及其他的js语法

使用的背景条件

默认情况下，只能打包处理 JS 这一类的静态资源

babel的作用

• 1 将 ES6 语法转化为 ES5 的语法
• 2 实现浏览器兼容

babel的使用步骤

• 1.安装
• 2 在 webpack.config.js 中添加 打包JS 文件规则
• 3 在项目根目录中创建一个 babel 配置文件： .babelrc
  补充说明
  babel-preset-env 表示用来解析所有的标准JS语法，包括了： ES2015/ES2016/ES2017/ES2018...
  不标准但是经常会使用的语法，此时，推荐使用babel-preset-stage-2 这个包，来处理
  安装： npm i -D babel-preset-stage-2
  JS语法提案，需要经过 5 个阶段，才会被采纳为正式标准