Vue(day6)

Webpack

• webpack官網
• webpack中文網

一 : Webpack 介紹

Webpack 是什麼?? (面試)

• 前端模塊化打包(構建)工具
• WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊、其它的一些瀏覽器不能直接運行的拓展語言（Scss，less等）以及新語法，並將其轉換和打包爲合適的格式供瀏覽器使用。

爲什要使用WebPack?? (面試)

• 瀏覽器不識別 SASS、Less ==> 須要對Less/SASS 預編譯CSS => 供瀏覽器使用
• 項目中的模塊化以及互相之間引用依賴包形成文件分散 ==> 須要把各個分散的模塊集中打包成大文件，減小HTTP的連接的請求次數
• 打包成了大文件,體積就變大了 ==> 代碼壓縮
• 部分ES6語法有兼容問題 => ES5 => 瀏覽器使用
• .........
• 以上這些操做之前都是須要咱們手動處理,這是很是繁瑣的, 這個時候webpack就能夠上場了,以上的這些操做,
• 在webpack裏,只要配置好,一下就能夠都搞定了

Webpack的基本能力：處理依賴、模塊化、打包

• 處理依賴：方便引用第三方模塊，讓模塊更容易複用、避免全局注入致使的衝突、、避免重複加載或者加載沒必要要的模塊
• 合併代碼：把各個分散的模塊集中打包成大文件，減小HTTP的連接的請求次數，優化代碼的體積(壓縮代碼)
• 各類插件：babel 把 ES6+ 轉化爲 ES5- 等

**webpack的工做原理 **(面試)

• 簡單的說就是分析代碼，找到「require」、「import」、「define」等關鍵詞，並替換成對應模塊的引用。
• 在一個配置文件中，指明對某些文件進行編譯、壓縮、組合等任務。把你的項目當成一個總體，經過一個給定的主文件 （index.js），webpack將從這個文件開始找到你的項目的全部的依賴文件，使用loaders處理他們，最後打包爲一個瀏覽器可 以識別的js文件。

二 : Webpack 四個核心概念：

入口(entry)、出口(output)、加載器(loader)、插件(plugins)

• 入口 : 要打包哪一個文件
• 出口 : 要打包到哪裏
• 加載器 : 加載除了js文件其餘文件的功能
• 插件 : 處理加載器完成不了的功能, 使用插件

三 : 學習 手動配置 webpack 的目的

• 爲了咱們後面使用腳手架作準備,
• 可以完成webpack的基本安裝
• 可以瞭解webpack配置文件的做用
• 可以說出webpack中loader 的做用
• 可以使用webpack處理常見的資源(css/less/圖片)
• 可以說出webpack-dev-server的做用以及配置
• 目標 : 能跟着 視頻 + 筆記 照着敲完一遍便可

webpack 使用步驟 (最新版)

webpack 第一階段

命名初始化階段

項目名不能有漢字,不能取名叫 webpack

1. 建立項目名稱並生成 package.json, 命令 : npm init -y
2. 安裝 : npm i -D webpack webpack-cli

webpack  : 是 webpack 工具的核心包
webpack-cli : 提供了一些在終端中使用的命令
-D(--save-dev) : 表示項目開發期間的依賴,也就是 : 線上代碼中用不到這些包了

3. 建立一個main.js文件

console.log('我就要被打包了,哦也');

4. 在 package.json的scripts中,添加腳本

"scripts": {
    "build": "webpack main.js"
  },
// webpack 是webpack-cli 中提供的命令, 用來實現打包的
// ./main.js 入口文件,要打包哪一個文件

5. 運行 : npm run build
6. 設置開發狀態 : mode

"build" : "webpack ./main.js --mode development"

// WARNING in configuration
// The 'mode' option has not been set, webpack will fallback to 'production' for this value.
// 若是沒有設置 mode 配置項, webpack 會默認提供 開發環境(production)

// Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
// 項目開發的兩種環境
  1. 開發環境 (development) : 開發過程就是開發環境
  2. 生產環境 (production) : 線上環境, 也就是 : 項目作好了,發佈上線
  生產環境下, 打包生產的js文件都是壓縮後的,  開發環境下代碼通常是不壓縮的

隔行變色案例

1. 建立 src/index.html
2. 隔行案例 => html => ul#list>li{我是 li \$}\*10
3. 安裝 juqery : npm i jquery, 而且引入 jquery
4. 暫時引入 main.js , 在 main.js 裏寫入

// 使用ES6的模塊化語法
import $ from 'jquery' // 優勢 不用沿着路徑去找

$('#list > li:odd').css('backgroundColor', 'red')
$('#list > li:even').css('backgroundColor', 'green')
// 語法報錯

5. 問題 :

// 引入 main.js 會報錯,由於瀏覽器不支持這個import 的Es6語法
// npm run build 以後
//  引入 dist/main.js 後會ok,由於webpack 幫咱們轉化爲瀏覽器可以識別的es5語法了

6. 歷程 :

//1. 若是index.html 中引入 jquery , 再引入 mian.js (沒有引入jquery了) => ok
//2. 若是index.html 中沒有引入 jquery , 直接使用es6的模塊化語法 import , 引入main.js就會報錯
//3. 若是index.html 中沒有引入 jquery , 直接使用es6的模塊化語法 import , webapck打包出 dist/main.js 引入 dist/main.js  ==> ok

7. 爲何 dist文件下的main.js 文件裏的代碼忽然這麼多

   看圖 (打包流程)

8. code 記得保存一份

webpack 第二階段

webpack 配置文件

1. 準備工做 : src源文件 : index.html和main.js
2. webpack 打包有兩種方式

   1-命令行 2-配置項

3. 方式 1 : 命令行

*    "build"  : "webpack ./mian.js" --mode development
*     npm run build
*   通常狀況下 : 改成
*     "build" : 入口  --output 出口
*     "build": "webpack ./src/js/main.js --output ./dist/bundle.js  --mode development",
*
*     驗證 : index.html 引入 bundle.js

4. 方式 2 : 配置項

第一步 : 項目`根目錄`下, 建立一個 `webpack.config.js`文件 (文件名固定死)
         專門指定其餘文件 : --config  webpack.XX.js
第二步 : 在 `webpack.config.js` 中,進行配置
// webpack 是基於 node的 , 因此配置文件符合 node 方式書寫配置
// 注意 : 不要再這個文件中使用ES6的的模塊化 import語法
// main.js裏可使用,是由於要經過webpack轉化爲es5的
// 而這個是webpack 的配置文件,,它是要轉化別人的,因此必需要經過
第三步 : 修改 `package.json` 中的 `scripts` , 腳本命令爲： "build": "webpack"
第四步 : 執行命令 : `npm run build`

5. 示例代碼(webpack.config.js) :

const path = require('path')

module.exports = {
  // 入口
  entry: path.join(__dirname, './src/js/main.js'),
  // 出口
  output: {
    // 出口目錄
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  },
  // 開發模式
  mode: 'development'
}

webpack 配置文件 html-webpack-plugin

1. html-webpack-plugin 必備的插件

做用 :
  1. 可以根據指定的模板文件 (index.html),自動生成一個新的 index.html,而且注入到dist文件夾下
  2. 可以自動引入js文件

1. 安裝 : npm i html-webpack-plugin
2. 配置 :

第一步: 引入模塊
const htmlWebpackPlugin = require('html-webpack-plugin')
第二步: 配置
// 插件
plugins: [
  // 使用插件 指定模板
  new htmlWebpackPlugin({
    template: path.join(__dirname, './src/index.html')
  })
]

webpack 配置文件 : webpack-dev-server

1. webpack-dev-server 使用 webpack 必備的功能(插件)

做用 : 爲使用 webpack 打包提供一個服務器環境

• 1.1 自動爲咱們的項目建立一個服務器
• 1.2 自動打開瀏覽器
• 1.3 自動監視文件變化,自動刷新瀏覽器...

2. 使用步驟 :

• 2.1 安裝 : npm i -D webpack-dev-server
• 2.2 兩種使用方式: 1-命令行 2-配置文件(推薦)

3. 方式 1 : 命令行配置

• 腳本 : "dev" : "webpack-dev-server"
• 運行到 npm run dev
• 查看路徑 : "http://localhost:8080/"
• ｢wds｣: Project is running at http://localhost:8080/
• 問題 1 : 自動打開?
• 解決 : 添加 --open
• 問題 2 : 指定端口號
• 解決 : 添加 --port 3001
• 問題 3 : 熱更新
• 解決 : --hot ( 整個頁面和整個項目打包 )

演示: 在瀏覽器調試樣式的地方去掉ul的樣式（不加--hot改變文件的css樣式改變時候ul樣式又出現，由於全局刷新了，加上後局部更新）     /* background: skyblue; */
而後分別看 加 --hot 和 不加 --hot 的區別

從新運行腳本

4. 方式 2 : 配置文件配置

// hot 不要寫在配置文件裏面,,否則的話還要配其餘插件麻煩
 "dev" : "webpack-dev-server --hot",

  devServer : {
    open : true,
    port : 3001
  }

webpack 第三階段 打包上線

1. 開發模式 : npm run dev ==> 不會打包的 ,只會把項目放到服務器裏
2. 假設項目開發完成了,要上線,怎麼操做?

2.1 執行 : `npm run build` 對項目進行打包,生成dist文件
2.2 模擬本地服務器 : 安裝 : `npm i -g http-server`
2.3 把dist文件裏的內容放到服務器裏便可, 直接運行`http-server`

webpack 第四階段 : 打包非js文件

webpack 只能處理 js 文件,非 js(css.less.圖片.字體等)處理處理不了, 藉助 loader 加載器

處理 css 文件

1. 建立一個 css 文件, 而後在 main.js中引入 import '../css/index.css';

   ul { style-list : none }

2. 安裝 : npm i -D style-loader css-loader
3. 在 webpack.config.js 中,添加個新的配置項 module
4. 在 module 中添加 loader 來處理 css

// loader
module: {
  rules: [
    //1.處理 css
      // 注意點 use執行loader 順序 從右往左
      // css-loader  :  讀取css文件內容,將其轉化爲一個模塊
      // style-loader :拿到模塊, 建立一個style標籤,插入頁面中
    { test: /\.css$/, use: ['style-loader', 'css-loader'] }
  ]
}

處理 less 文件

1. 建立一個 less 文件, 而後再 main.js 中 引入 import '../css/index.less';
2. 安裝 : npm i -D less-loader less style-loader css-loader
3. 在 webpack.config.js 中, 配置 module->rules
4. 在 module 中, 添加 loader 來處理 less

ul {
  background-color: aqua;
  li {
    &:hover {
      color: yellow;
    }
  }
}

5. 配置 :

   { test :/\.less$/, use : ['style-loader','css-loader','less-loader'] },

處理 圖片 文件

設置背景圖片

.cls {

width: 300px;

height: 300px;

background: url('../css/4.jpg');

background-size: 100%;

}

1. 安裝 : npm i -D url-loader file-loader

   url-loader (推薦) 和 file-loader 二選一便可

2. 在 webpack.config.js 添加 loader 規則

// 處理圖片
  { test : /\.(jpg|png)$/, use : ['url-loader'] },

3. url-loader 默認會將圖片轉化爲 base64 編碼格式, 目的:提升性能
4. file-loader 在車裏圖片時, 會對文件進行重命名 :

原始：    background-image: url(../images/1.jpg);
處理後：  background-image: url(9c9690b56876ea9b4d092c0baef31bb3.jpg);

5. base64 編碼格式的圖片說明 :

• 精靈圖 : 將一些小圖片合併爲一張圖片,減小請求次數,提升性能
• 字體圖標 :直接將一些小的圖片,合併到字體文件中,而且不會失真
• base64 : 是一種編碼格式,可以將圖片、文字等常見的文件,轉化爲 base64 格式,這種字符串格式, 瀏覽器可以識別而且讀取顯示到頁面中;
• base64 是一個字符串,也能夠直接被內嵌到頁面中, 或者 css 中
• 注意 : 大圖片不適合用 base64 處理, 只有小的圖標才適合 base64 處理

6. 設置配置

方式1 :{ test : /\.(jpg|png)$/, use : ['url-loader?limit=57417'] }, 
方式2 : 
{
        test: /\.(jpg|png)$/, use: [
          {
            loader: 'url-loader',
            options: {
              //  比57417這個小 => 轉化爲base64
              //  大於等於這個57417值 => 不會轉base64 內部調用 file-loader 加載圖片
              limit: 57417
            }
          }
        ]
      },

處理 字體 文件

1. 準備字體圖標: 字體圖標文件 iconfont 或者 從阿里矢量圖標裏下載

2. 拷貝到項目中的 css 文件夾中

3. 在 main.js 中引入 css 文件

   import '../css/iconfont/iconfont.css'

4. 使用 :

5. 在 webpack.config.js 中配置

// 4. 處理字體圖標
  { test:/\.(svg|woff|woff2|ttf|eot)$/,use:'url-loader'}

處理 ES6 語法

1. 如今的項目都是使用 ES6 開發的, 可是這些新的 ES6 語法, 並非全部的瀏覽器都支持, 因此就須要有一個工具,幫咱們轉成 es5 語法, 這個就是: babel
2. babel
3. Babel is a JavaScript compiler. ==> babel 是一個 JavaScript 編譯器
4. webpack 只能處理 import / export 這個 es6 模塊化語法
   而其餘的 js 新語法,應該使用 babel 來處理
5. 好比 : var o = { ...obj } 在谷歌上能夠,edge 就不能夠
6. babel 的使用 :

• 6.1 安裝 1 : npm i -D babel-core babel-loader@7
  • babel-core 是 babel 的核心包
  • babel-loader 加載 js 文件, 並將 js 代碼內容交給 babel-core 解析爲 es5 低版本的 js
• 6.2 安裝 2 : npm i -D babel-preset-env babel-preset-stage-2
  • babel-preset-* 表示可以解析什麼版本的 js 語法
  • babel-preset-env : 表示可以解析 es2015,es2016,es2017,es2018 這些標準的語法
  • babel-preset-stage-2 : 用來解析通過會遇到,可是尚未被採納爲標準的語法
  • 好比 : 'abc'.padStart(10, '6') : 準備 10 位字符,有 abc,前面不夠用 6 補充,是 es2017 的語法,
  • babel-polyfill與babel-plugin-transform-runtime 也是作兼容處理的,之前都是用這個,兼容更早的
• 6.3 配置 : 在 webpack.config.js 中添加一個 loader

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

• 6.4 在項目根目錄中建立 babel 的配置文件，叫：.babelrc

{
  "presets": [
    "env",
    "stage-2"
  ],

  -----------
  // 暫時不用
  // 若是將來某一天真的用到了polify
    "plugins": [
        ["transform-runtime", {
                "helpers": false,
                "polyfill": true,
                "regenerator": true,
                "moduleName": "babel-runtime"
    }]

• 6.5 測試 : 谷歌 和 edge

var obj = {
  name: 'zs',
  age: 20
}

var o = { ...obj }
console.log(o)

webpack中文連接 : https://www.webpackjs.com/loaders/url-loader