webpack學前必備

webpack中文網

webpack官網

1. Webpack 介紹

Webpack 是什么?? (面試)

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

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

• 瀏覽器不識別 SASS、Less ==> 需要對Less/SASS 進行預編譯轉為CSS , 供瀏覽器使用
• 項目中的模塊化以及互相之間引用依賴包造成文件分散 ==> 需要把各個分散的模塊集中打包成大文件，減少HTTP的鏈接的請求次數
• 打包成了大文件,體積就變大了 ==> 代碼壓縮
• 部分ES6語法有兼容問題 => ES5/ES3 => 瀏覽器使用
• …
• 以上這些操作以前都是需要我們手動處理,這是非常繁瑣的, 這個時候webpack就可以上場了,以上的這些操作,
• 在webpack里,只要配置好,一下就可以都搞定了

webpack模塊化說明

1. webpack是一個模塊化打包器。2. webpack中的模塊：以前，我們說一個js文件就是一個模塊webpack中一切的資源都可以稱之為模塊。webpack基于node,  html/css/js/圖片/資源都可以是模塊3. webpack內部提供了一種通用的模塊機制。支持市面上所有的模塊化語法，，，，，最終webpack內部打包的時候，都會變成通用的模塊化語法。4. 目前有哪些模塊化規范
nodejs中 ：   Commonjs規范     require()  module.exports ={}
瀏覽器中：    AMD規范   CMD規范  requirejs seajs
ES6中還提供了一種通用的模塊化規范  import export （nodejs  瀏覽器）webpack支持所有的規范。

使用說明

一般來說，以后開發都是在webpack的環境下進行開發（node環境）

并且我們寫完的項目并不會直接上線。 而是會經過webpack進行打包。 最終把打包過的文件進行上線。

2. Webpack 四個核心概念 (學前了解)：

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

• 入口 : 要打包哪個文件
• 出口 : 要打包到哪里
• 加載器 : 加載除了js文件其他文件的功能 (css less png)
• 插件 : 處理加載器完成不了的功能, 使用插件

3. npm 使用回顧

3.1 全局安裝

• 格式 : npm i xxx -g
• 作用 : 全局安裝的包, 是當成一個工具來使用的
• 比如 :npm i http-server -g, npm i live-server -g , npm i json-server -g 等等

3.2 本地安裝1

• 格式 : npm i xxx
• 其他版本 :npm i xx --save 和 npm i xx -S
• 作用 : 本地安裝的包, 發布上線階段 要用到的庫
• 依賴位置 : 把包的依賴添加到 dependencies中
• 比如 : npm i axios

3.3 本地安裝2 (配置webpack用的最多)

• 格式 : npm i xxx -D
• 其他版本 : npm i xxx --save dev
• 作用 : 本地安裝的包, 只在開發階段都要用到的庫
• 依賴位置 : 把包的依賴添加到 devdependencies中
• 比如 : npm i webpack -D

4. 淘寶鏡像

• 方式1 : 直接命令

2.1.1. 命令 
npm config set registry https://registry.npm.taobao.org2.1.2. 驗證命令
npm config get registry
如果返回https://registry.npm.taobao.org，說明鏡像配置成功。

• 方式2 : nrm

- 全局安裝 nrm   :  npm i nrm -g 
- 查看有哪些鏡像源  : nrm ls
- 切換鏡像源       : nrm use taobao- 如果確定安裝過 nrm 但是報錯不能使用  =>  可能是 nrm 沒有配置過環境變量  
- cmd => where nrm   => C:\Users\ma250\AppData\Roaming\npm\nrm
=>拿到 C:\Users\ma250\AppData\Roaming\npm => 添加到環境變量里面去 => 再把終端都關閉

5. package.json 的介紹

npm init -y

{// 包名/項目名  要求:小寫字母, 不能是大寫或者叫webpack"name": "webpack-demo",// 版本號  "version": "1.0.0",// 介紹"description": "",// 默認入口文件index.js  可以自己指定  "main": "index.js",// 腳本 (★★★)  "scripts": {"test": "echo \"Error: no test specified\" && exit 1"},// 關鍵字  "keywords": [],// 作者"author": "",// 許可證   "license": "ISC"
}

• 配置自定義腳本
  • 創建一個 index.js =>console.log('測試啟動腳本')
  • 執行 : node index.js
  • 也可以通過運行腳本來執行命令 (優勢 如果配置太多 手動就不好處理了)
• 常見腳本

"scripts": {"build": "node index.js","dev": "node index.js","serve": "node index.js",
}
// 像以上這幾種運行腳本 :  npm run build/dev/serve"scripts": {"start": "node index.js","stop": "node index.js","restart": "node index.js"
},  
// 像  start、stop、restart test這幾種  我們可以省略 run
// 直 npm run start 或者  npm start 都可以  

webpack配置

1. webpack打包的基本使用

本地安裝

1. 創建項目名稱 webacpk-demo : 不能是大寫 不能是webpack
2. 使用npm init -y生成package.json :
3. 創建兩個文件夾 src/(源代碼文件夾) 和 dist/(最終打包輸出的文件夾)
4. 在 src 里面創建一個 index.js 文件 (準備要被打包的入口文件)

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

5. 安裝依賴包 :npm i webpack webpack-cli -D

webpack  - 核心包
webpack-cli - 使用 webpack 4+版本需要安裝

6. 添加腳本 : build

"scripts": {// "build" : "webpack 入口文件 --output 出口文件""build" : "webpack ./src/index.js --output dist/bundle.js"},

7. 打包運行命令 :npm run build

• 畫圖

2. mode 配置

WARNING in configuration
The 'mode' option has not been set, webpack will fallback(備用) to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

• mode配置項
  • development : 開發階段 (不壓縮)
  • production : 發布階段 (壓縮)
• 配置

"scripts": {"build": "webpack ./src/index.js --output dist/bundle.js --mode development""build": "webpack ./src/index.js --output dist/bundle.js --mode production"},

3. 指定配置文件 (★★★)

使用一個配置文件

隨著配置越來越多,在腳本里配置就顯得麻煩了 所以我們一般常用配置文件

1. 根目錄 創建一個配置文件 : webpack.config.js

你也可以創建 webpack.config.dev.js(開發階段用的)  webpack.config.prod.js(發布階段用的)

2. 添加配置

// 因為 webpack 是基于 node
// 所以在配置文件里面 我們可以直接使用 node 的語法
const path = require('path')module.exports = {// 入口entry: path(__dirname, './src/index.js'),// 出口output: {// 目錄path: path.join(__dirname, './dist'),filename: 'bundle.js',},// modemode: 'development',
}

3. 修改腳本

"build" : "webpack --config webpack.config.js"

4. 隔行變色案例

1. 創建 : src/index.html
2. 隔行案例結構 => ul>li{我是li $}* 10
3. 安裝 jquery : npm i jquery
4. 引入 jquery 和 設置樣式 (ok)

// 引入
<script src="../node_modules/jquery/dist/jquery.js"></script>// 設置樣式
$('li:odd').css('background', 'red')
$('li:even').css('background', 'blue')

5. 使用 es6 的模塊化語法 import

// 使用ES6的模塊化語法
import $ from 'jquery'      # 優點: 不用沿著路徑去找      # 瀏覽器不支持import語法 報錯
....
// 語法報錯

6. 打包 : npm run build
7. 引入 打包后的文件

<script src='../dist/bundle.js'></script>

8. code記得保存一份

5. 插件: html-webpack-plugin

html-webpack-plugin

作用 :

1. 能夠根據指定的模板文件 (index.html),自動生成一個新的 index.html,并且注入到dist文件夾下
2. 能夠自動引入js文件

1. 安裝 :

npm i html-webpack-plugin -D

2. 配置 :

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

webpack 處理 非 js 文件

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

1. 處理 css文件

1. 創建一個css文件 : src/css/index.css

li {line-height: 40px;height: 40px;
}

2. index.js 中引入

import './css/index.css'

3. 安裝 : npm i style-loader css-loader -D
4. 配置

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

5. 重啟 npm run dev

2. 處理 less 文件

1. 創建一個 less 文件 : src/css/index.less

ul {list-style: none;li {&:hover {color: yellow;}}
}

2. index.js 中引入

import './css/index.less'

3. 安裝 : npm i less-loader less style-loader css-loader -D
4. 配置

// loader
module: {rules: [//2.處理 less{ test: /\.less$/, use: ['style-loader', 'css-loader','less-loader'] }]
}

5. 重啟 npm run dev

3. 處理圖片

1. 創建src/images/, 引入兩種圖片 01.png 和 1.gif
2. 在index.css中設置背景圖片

body {padding-top: 200px;background: url(../images/01.png) no-repeat;
}

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

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

4. 配置 :

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

4. url-loader 和 file-loader

4.1通過 npm run build 打實體閉演示區別

• url-loader 會把圖片編譯成 base64 格式,打包到 bundle.js 中

- base64 : 是一種編碼格式,能夠將圖片、文字等常見的文件,轉化為 base64 格式,這種字符串格式, 瀏覽器能夠識別并且讀取顯示到頁面中, 也可以直接被內嵌到頁面中, 或者 css 中
- 一旦打包成base64格式之后, 會以字符串的形式存在 bundle.js 中, 好處是能夠減少一個圖片的 HTTP 請求
- index.html   =====>  bundle.js( base64圖片格式 )

注意 : Base64 的好處是能夠減少一個圖片的 HTTP 請求，然而，與之同時付出的代價則是 CSS 文件體積的增大。

CSS 文件體積的增大意味著什么呢？意味著 CRP 的阻塞。 CRP（Critical Rendering Path，關鍵渲染路徑）

CSS 文件的體積直接影響渲染，導致用戶會長時間注視空白屏幕

• file-loader 不會把圖片打包到 bundle.js中，而是單獨的生成了一個張圖片

劣勢 : 單獨生成一個圖片, 就要多發送一個圖片的 http請求

4.2 最終方案

方案 :

? 如果圖片小的話, 就使用url-loader 編譯成base64 格式,

? 如果圖片大的話 就使用file-loader單獨生成一個圖片文件

1. 配置

// 使用 url-laoder , 因為url-loader 依賴 file-loader
{ test : /\.(jpg|png|gif)$/, use : ['url-loader'] },

2. 添加limit配置

方式1(舊) :{ test : /\.(jpg|png)$/, use : ['url-loader?limit=10000'] },   // use 后 多個為數組, 少為對象 都可以
方式2(新) : 
{test: /\.(jpg|png)$/, use: {loader: 'url-loader',options: {//  < 21k   => 通過url-loader => 轉化為base64//  >= 21kb => 通過file-loader=>  不會轉base64 單獨生成一個圖片文件limit: 21 * 1024}}
},

3. 可以 build演示

5. 處理 字體 文件

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

2. 在 index.js 中引入 css 文件

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

3. 使用 :

4. 在 webpack.config.js 中配置

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

提取文件

1. 提取css到css文件夾

提取css文件

1. 安裝 : npm i mini-css-extract-plugin -D
2. 配置

//2.1 引入 模塊
const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {//2.2 實例插件plugins: [new MiniCssExtractPlugin()],//2.3 配置module: {rules: [{test: /\.css$/,use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader'],},],},
};/// =======> 生成一個 main.css 文件

3. 自定義css文件名

//2.2 實例插件
new MiniCssExtractPlugin({filename: 'css/index.css',
}),// ===> 圖片引入失敗 , 層級不對  

4. 添加公共路徑

 {test: /\.css$/,use: [{loader: MiniCssExtractPlugin.loader,options: {// index.css 里面的引入路徑都加個 ../publicPath: '../',},},'css-loader',],},

現在的css文件

body {padding-top: 200px;background: url(../3309d79967e334a7c78cf8130266c390.gif) no-repeat;
}

2. 提取字體到 fonts文件夾里

{test: /\.(eot|woff|svg|ttf)$/,use: {loader: 'url-loader',// loader的參數配置options: {// 范圍  30k   1kb = 2014字節limit: 2 * 1024,name: '[name].[ext]',outputPath: 'fonts'}}
},

3. 提取圖片到 images文件夾里

// 處理圖片
{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 1000,name: '[name].[ext]',outputPath: 'images',},},],
},

開發階段

1. webpack-dev-server

作用 : 為使用 webpack 打包提供一個服務器環境

? 1 自動為我們的項目創建一個服務器

? 2 自動打開瀏覽器

? 3 自動監視文件變化,自動刷新瀏覽器…

1. 安裝 :npm i webpack-dev-server -D
2. 添加一個腳本 dev

"scripts": {"serve" : "webpack-dev-server --config webpack.config.js"
},

3. 運行腳本 :

運行 :npm run serve結果 : i ｢wdm｣: Compiled successfully.查看 : Project is running at http://localhost:8080/

4. 作用演示 :

# 自動打開瀏覽器devServer: {open: true
}
# 自動監視文件變化 + 自動刷新
$('li:even').css('background', 'blue')  ==> 'yellow' # 配置端口devServer: {open: true,port :3001
}

2. hot 熱更新 (待定)

"dev": "webpack-dev-server --config webpack.config.js --hot"

##3. serve 和 build的使用區別

"scripts": {"build": "webpack --config webpack.config.js","serve": "webpack-dev-server --config webpack.config.js"
},

• npm run serve

開發模式 :  => 開發項目中使用 , 不會打包出實體文件, 打包到內存中, 這樣能夠及時監視更新

• npm run build

發布上線使用
1 執行 : `npm run build` 對項目進行打包,生成dist文件
2 模擬本地服務器 : 安裝 : `npm i -g live-server`
3 把dist文件里的內容放到服務器里即可, 直接運行`live-server`

處理es6語法

現在的項目都是使用 ES6 開發的, 但是這些新的 ES6 語法, 并不是所有的瀏覽器都支持, 所以就需要有一個工具,幫我們轉成 es5 語法, 這個就是: babel

• Babel is a JavaScript compiler. ==> babel 是一個 JavaScript 編譯器

• webpack 只能處理 import / export 這個 es6 模塊化語法 而其他的 js 新語法,應該使用 babel 來處理

babel 英文網

babel中文網

webpack-babel-loader

1. 安裝 :

npm install -D babel-loader @babel/core @babel/preset-envbabel-loader 處理js
@babel/core 核心包
@babel/preset-env  處理es6 789....

2. 配置

module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']   // 處理es6-最新   }}}]
}

3. 或者 創建 .babelrc

{"presets": ["env"]
}

模塊化語法 (webpack-import)

1. 模塊化語法的分類 (必記)

• node的commonjs 規范 :
  • 導入 : require()
  • 導出 : module.exports = {}
• es6的最新模塊化語法
  • 導入 : import
  • 導出 : export

2. 介紹

模塊中的變量或者函數等等都是只能在本模塊使用, 其實模塊想使用 需要引入

3. 導出一個變量

• 導出一個變量

let num = 30let test = () => console.log(666)let obj = { name: 'zs', age: 60 }export default num  或者
export default obj  或者
export default test

• 引入

import res from './a'   // res 任意取名console.log(res)

4. 導出多個變量

• 導出多個變量

// 導出多個
export let tool1 = () => console.log(111)
export let tool2 = () => console.log(222)
export let tool3 = () => console.log(333)

• 引入

// { } 里面必須是固定名稱
import { tool1, tool2, tool3 } from './a'
console.log(tool1)
console.log(tool2)
console.log(tool3)tool1()
tool2()
tool3()

• 取別名

import { tool1 as t1, tool2, tool3 } from './a'
console.log(t1)t1()

單文件組件 (webpack-vue)

1. 介紹

單文件組件

• 拷貝webpack環境文件 : webpack.config.js + package.json
• 注冊組件

// index.js 
Vue.component('Demo', {template : `<div>組件</div>`
})
// 缺點無高亮

• 提出一個對象到一個模塊中

// demo.js
let Demo = {template : `<div>組件</div>`
}
module.exports  = Demo
// 還是沒有高亮

• 改在 單文件組件

// demo.vue
<script>module.exports = {template : `<div>組件</div>`}
</script>

• 添加 結構和樣式

<template><div>組件</div>
</template>
<script>module.exports = {}
</script>
<style lang='less'>div {color : redfont-size :'40px'}
</style>

• 配置vue

// index.html
<div id="app"></div>// index.js
import App from './App.vue'
import Vue from 'vue'new Vue({// el 指定管理編輯el: '#app',// 渲染根組件render: (h) => h(App),
})

2. 配置

vue官網 => vue-loader

vue-loader

1. 安裝:

npm install -D vue-loader vue-template-compiler

2. 配置

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')            # +++module.exports = {module: {rules: [// ... 其它規則{test: /\.vue$/,loader: 'vue-loader'                                         # +++}]},plugins: [// 請確保引入這個插件！new VueLoaderPlugin()                                             # +++]
}

3. 安裝vscode插件 : Vetur

• 高亮
• 有提示 : 輸入vue

打包安裝模塊出錯: 安裝版本低的模塊即可

> npm install 模塊名稱@版本號 --save-dev

如：

npm install webpack@3.8.1 --save-dev