認(rèn)識(shí)webpack

什么是webpack

? webpack是一個(gè)前端的模塊化打包(構(gòu)建)的工具

功能：
?- 1.打包(構(gòu)建)
?- 2.模塊化

特點(diǎn)
? webpack將一切繁雜的、重復(fù)的痹兜、機(jī)械的工作自動(dòng)處理清女，開發(fā)者只需要關(guān)注于功能的實(shí)現(xiàn)的

打包(構(gòu)建)

?- 1.語法轉(zhuǎn)換

? ES6--->ES5 供瀏覽器的解析

? less/sass---->css 供瀏覽器的解析

? TS------> ES5 供瀏覽器的解析

?- 2.文件壓縮和合并

? js / html /css 文件壓縮拍顷，刪除所有的注釋和空格验夯，變量名簡寫

? js / css 文件合并 魁蒜，將多個(gè)js文件或則css文件合并成一個(gè)js文件或則css文件

?- 3.提供開發(fā)期間的服務(wù)器

? 能夠自動(dòng)打開瀏覽器，監(jiān)聽文件變化烁挟，自動(dòng)刷新瀏覽器的

模塊化

? 在webpack中麻惶，所有的資源都是模塊

webpack 為前端提供了模塊化開發(fā)環(huán)境，有了webpack之后信夫，我們可以像寫 NodeJS 代碼一樣，寫前端代碼卡啰。
? 引入 js/css/圖片 文件：

const Vue = require('vue')

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

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

? 每個(gè)js文件都是一個(gè)獨(dú)立的模塊静稻，模塊之間的作用域是隔離的，需要通過導(dǎo)入和導(dǎo)出 來實(shí)現(xiàn)兩個(gè)模塊之前的數(shù)據(jù)共享
?webpack 能夠識(shí)別現(xiàn)在前端所有的模塊化語法匈辱，也就是說：不管你用的
require.js（AMD）振湾、NodeJS（CommonJS）、ES6（import/export） 哪種語法亡脸，webpack全都認(rèn)識(shí)押搪，全都可以解析
? webpack 不僅實(shí)現(xiàn) JS 的模塊化树酪，也實(shí)現(xiàn)了 CSS、圖片大州、視頻 等所有前端資源续语，全部都可以使用模塊化的方式來處理。

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

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

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

注意點(diǎn)：
? webpack 自身沒有提供新的模塊化語法厦画，但是疮茄，它能夠處理所有的前端模塊化語法

使用webpack

初始化package.json

• 1 創(chuàng)建一個(gè)文件夾：webpack-basic

• 2 通過 npm init -y 初始化一個(gè)package.json文件

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

• 4 在 package.json 文件中的 scripts 配置項(xiàng)中，添加一個(gè)腳本命令

build 表示構(gòu)建根暑、打包
webpack 入口文件路徑 --output 出口文件路徑

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

• 5 在終端中力试，通過 npm run build 來執(zhí)行上面配置好的 build 命令
• 最終，打包好的內(nèi)容就會(huì)放在 dist/bundle.js 目錄中

實(shí)現(xiàn)依賴項(xiàng)加載的原理：
? 采用的是遞歸的查詢的方式排嫌，查找依賴項(xiàng)畸裳，找完所有的依賴項(xiàng)，然后將依賴項(xiàng)全部打包合并到一個(gè)文件中

打包執(zhí)行的過程

問題

1.為什么 webpack 打包后淳地，就可以在瀏覽器中運(yùn)行了怖糊？？薇芝？
? 答：webpack 能夠識(shí)別和處理所有的 模塊化 語法蓬抄，能夠?qū)⑦@些模塊化語法，轉(zhuǎn)化為瀏覽器能夠執(zhí)行的代碼

webpack中的兩個(gè)環(huán)境

(開發(fā)環(huán)境)development

?作用
? 開發(fā)期間的環(huán)境夯到，在項(xiàng)目沒有上線之前使用嚷缭，代碼不會(huì)壓縮
?配置
? "build"："webpack ./src/js/main.js --output ./dist/bundle.js --mode development"
?特點(diǎn)
? 打包的文件是未壓縮的

(生產(chǎn)環(huán)境)production

? 作用

? 項(xiàng)目上線的時(shí)候使用，將代碼打包壓縮

? 配置

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

? 特點(diǎn)

? 打包的文件是壓縮的

? 使用的場景

? 開發(fā)期間 npm run build

上線時(shí) npm run pro

webpack命令行的簡寫

簡寫語法
"build"："webpack 入口文件路徑 --mode 模式"
實(shí)例
"build"："webpack ./src/js/main.js --mode development"
"pro"："webpack ./src/js/main.js --mode production"

使用的命令
開發(fā)期間 命令：npm run build
上線打包 命令：npm run pro

注意點(diǎn)
簡寫模式中沒有指定出口路徑耍贾，服務(wù)器會(huì)默認(rèn)在根目錄下創(chuàng)建一個(gè)dist目錄阅爽，存放的文件名稱，和入口問文件名相同

webpack的配置文件的使用

什么叫配置文件

功能
這個(gè)文件將所有的配置項(xiàng)導(dǎo)出荐开，webpack會(huì)讀取這個(gè)配置文件付翁，根據(jù)配置文件中的配置項(xiàng)，執(zhí)行相應(yīng)的操作
使用的步驟

• 1.在項(xiàng)目的根目錄下創(chuàng)建一個(gè)webpack.config.js文件
• 2.在webpack.config.js中配置參數(shù)
• 3.完成基本配置后晃听，到package.json文件中修改build的參數(shù)值
• 4.在終端中輸入命令：npm run build

webpack.config.js的基本配置項(xiàng)

• 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命令行的使用
  作用
  提供了開發(fā)期間的運(yùn)行服務(wù)器的環(huán)境

在package.json配置項(xiàng)

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

配置項(xiàng)說明

--open
  打開瀏覽器
--contentBase
  默認(rèn)打開的目錄
--port
  打開的端口號(hào)
--hot
  熱更新

使用的命令

 npm run dev
webpack-dev-server的配置文件的使用
**作用**
  提供了開發(fā)期間的運(yùn)行服務(wù)器的環(huán)境

使用的步驟 -webpack.config.js配置文件的配置項(xiàng)

配置項(xiàng)說明
  devServer
    dev-server配置
  open
    自動(dòng)打開瀏覽器
  contentBase
    默認(rèn)打開的目錄
  port
    打開的端口號(hào)
  hot
    熱更新
  使用的命令
    npm run dev

webpack-dev-server 做了什么百侧？

• 1.在項(xiàng)目的根目錄開啟了一個(gè)新的服務(wù)器，這個(gè)新的服務(wù)器的地址為：http://localhsot：8080/

• 2.自動(dòng)打開瀏覽器

• 3.打開指定的目錄下的index.html

• 4.能夠修改默認(rèn)的端口號(hào)

• 5.熱更新

• 6.自動(dòng)監(jiān)視文件的變化能扒，自動(dòng)刷新瀏覽器
  配置項(xiàng)功能詳細(xì)描述

webpack和webpack-dev-server的區(qū)別

• wepack
  它是項(xiàng)目打包上線時(shí)使用的佣渴，能夠?qū)⒋虬鼔嚎s好的文件保存到dist文件夾中，輸出保存到磁盤中
• webpack-dev-server
  它提供了開發(fā)期間的服務(wù)器的環(huán)境初斑，也能夠?qū)?xiàng)目進(jìn)行打包辛润，但是不壓縮代碼，將打包好的文件緩存到服務(wù)器的根目錄见秤，但是不會(huì)存儲(chǔ)到磁盤中砂竖，可以通過服務(wù)器直接讀取并使用

注意點(diǎn)

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

應(yīng)用場景
開發(fā)期間使用webpack-dev-server真椿，上線打包使用webpack

html-webpack-plugin插件的使用

作用

• 1.根據(jù)指定的模板，在內(nèi)存中生成一個(gè)頁面
• 2.在這個(gè)頁面中自動(dòng)引入了js/css/img/..等文件乎澄，然后在內(nèi)存中將頁面重構(gòu)突硝，最終渲染在瀏覽器的是渲染完成頁面

為什么能夠自動(dòng)引入js/css等文件？

首先在配置項(xiàng)中設(shè)置了模板文件三圆，webpack默認(rèn)可以處理js的引入的狞换，所以講所有的引入和依賴項(xiàng)全都寫在了main.js中，當(dāng)webpack舟肉，使用模塊化引入修噪，就可以將js/css/image等文件全部打包放在了一起，然后webpack默認(rèn)的又引入了這個(gè)js文件路媚，所以到了不需要手動(dòng)引入

html-webpack-plugin使用的步驟

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

• 2.webpack-config.js配置項(xiàng)
  2-1引入模塊
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  2-2在plugin屬性中指定插件
  new HtmlWebpackPlugin
  template:path.join(__dirname,"./src/js/index.html")
  )
  2-3配置項(xiàng)的說明
  new HtmlWebpackplugin
  添加插件的實(shí)例
  template
  指定的模板文件
  特點(diǎn)

• 1.如果使用了html-webpack-plugin這個(gè)插件黄琼，在處dev-server配置中，可以省略contentBase這個(gè)選項(xiàng)

• 2.使用了這個(gè)插件整慎，不用在模板的html中使用sript等方式引入js/css等文件

loader的使用

打包處理非靜態(tài)資源

webpack.config.js的配置項(xiàng)

 module{
   rules:[
     {test:正則匹配項(xiàng)脏款，use:[‘使用的loader1’,‘使用的loader2’,    ...]  },
     {test:正則匹配項(xiàng)，use:[‘使用的loader1’,‘使用的loader2’,    ...]  },
   ]
 }

非靜態(tài)資源注意點(diǎn)

• 1.use的執(zhí)行順序
  默認(rèn)是從右往左執(zhí)行的裤园，例如['style-loader','css-loader'],會(huì)先執(zhí)行css-loader撤师，然后將結(jié)果給style-loader處理。

webpack處理靜態(tài)文件（例如css）的過程

• 1.webpack會(huì)處理main.js入口文件
• 2.執(zhí)行到require('index.css'),會(huì)使用引入模塊方式引入文件
• 3.webpack會(huì)到webpack.config.js中拧揽，找到module中的rules這一屬性剃盾，然后通過text中的正則匹配文件
• 4.找到這個(gè)文件會(huì)按照use中的loader方式處理文件
• 5.處理完成后，這個(gè)文件就生效了

css-loader

css-loader 使用的步驟

- 1.下載安裝
  npm i -D style-loader css-loader
- 2.在 webpack.config.js 中淤袜，添加配置項(xiàng)來打包處理 CSS 文件
  
  正則的匹配項(xiàng)
      /\.css$/
  使用的loader
      ['style-loader','css-loader']
  配置項(xiàng)
      {test:'/\.css/',use:['style-loader','css-loader']}
  loader的說明
    css-loader
      讀取css文件的內(nèi)容痒谴，然后將讀取的內(nèi)容轉(zhuǎn)化為一個(gè)模塊
    style-loader
      讀取css-loader的模塊，在html的head標(biāo)簽中铡羡，創(chuàng)建一個(gè)style標(biāo)簽积蔚，然后將模塊的內(nèi)容放到這個(gè)style標(biāo)簽中

less-loader

  正則的匹配項(xiàng)
    /\.less$/
  使用的loader
    ['style-loader','css-loader','less-loader']
  配置項(xiàng)
    {test:'/\.css/',use:['style-loader','css-loader','less-loader']}
  loader的說明
  less-loader
    將less的內(nèi)容轉(zhuǎn)成編譯后的css文件內(nèi)容

url-loader/file-loader

url-loader

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

配置項(xiàng)的說明
loader
使用的模塊
options
配置規(guī)則
limit字節(jié)數(shù)

file-loader

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

file-loader注意點(diǎn)

• 使用url-loader，一定要安裝file-loader烦周，因?yàn)閡rl-loader依賴于file-loader尽爆，不一定要寫在loader中，會(huì)自動(dòng)引入
• 使用url-loader读慎，會(huì)默認(rèn)將圖片轉(zhuǎn)成base64格式的字節(jié)碼
• 使用file-loader教翩，會(huì)對(duì)文件名重命名

兩個(gè)問題

• 為什么要將圖片轉(zhuǎn)成base64格式的

將文件轉(zhuǎn)成base.64格式的數(shù)據(jù)能夠?qū)⒉煌愋偷母袷降臄?shù)據(jù)，嵌入到j(luò)s文件中贪壳，打包的時(shí)候，能夠?qū)⒁氲膱D片放到j(luò)s中蚜退。

• 為什么file-loade會(huì)對(duì)文件重名

使用了MD5的特征碼提取闰靴，一個(gè)文件只要內(nèi)容沒有發(fā)生改變彪笼，MD5的特征碼始終唯一且不會(huì)改變

• base64和MD5的應(yīng)用場景

一般用于小圖片的轉(zhuǎn)換，如果一個(gè)圖片文件過于龐大蚂且，無異于增加了js的大小
MD5適用于一個(gè)頁面多次用到相同的圖片配猫，可能名稱不同，但只需要發(fā)送一次請(qǐng)求圖片杏死。

細(xì)節(jié)補(bǔ)充

• 未設(shè)置mode時(shí)泵肄，打包的警告

mode 配置項(xiàng)沒有指定， webpack 默認(rèn)將 mode 設(shè)置為 production

打包字體

配置項(xiàng)

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

打包字體使用的步驟

• 1 安裝： npm i -D url-loader file-loader
• 2 在 webpack.config.js 中添加規(guī)則
  字體圖標(biāo)的使用：
  1 導(dǎo)入 字體圖標(biāo) 庫的樣式
  2 在 index.html 頁面中淑翼，給元素添加 字體圖標(biāo) 提供的樣式名稱

處理ES6以及其他的js語法

使用的背景條件

默認(rèn)情況下腐巢，只能打包處理 JS 這一類的靜態(tài)資源

babel的作用

• 1 將 ES6 語法轉(zhuǎn)化為 ES5 的語法
• 2 實(shí)現(xiàn)瀏覽器兼容

babel的使用步驟

• 1.安裝
• 2 在 webpack.config.js 中添加 打包JS 文件規(guī)則
• 3 在項(xiàng)目根目錄中創(chuàng)建一個(gè) babel 配置文件： .babelrc
  補(bǔ)充說明
  babel-preset-env 表示用來解析所有的標(biāo)準(zhǔn)JS語法，包括了： ES2015/ES2016/ES2017/ES2018...
  不標(biāo)準(zhǔn)但是經(jīng)常會(huì)使用的語法玄括，此時(shí)冯丙，推薦使用babel-preset-stage-2 這個(gè)包，來處理
  安裝： npm i -D babel-preset-stage-2
  JS語法提案遭京，需要經(jīng)過 5 個(gè)階段胃惜，才會(huì)被采納為正式標(biāo)準(zhǔn)