webpack學(xué)前必備

webpack中文網(wǎng)

webpack官網(wǎng)

1. Webpack 介紹

Webpack 是什么?? (面試)

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

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

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

webpack模塊化說明

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

使用說明

一般來說，以后開發(fā)都是在webpack的環(huán)境下進(jìn)行開發(fā)（node環(huán)境）

并且我們寫完的項(xiàng)目并不會(huì)直接上線。 而是會(huì)經(jīng)過webpack進(jìn)行打包。 最終把打包過的文件進(jìn)行上線。

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

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

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

3. npm 使用回顧

3.1 全局安裝

• 格式 : npm i xxx -g
• 作用 : 全局安裝的包, 是當(dāng)成一個(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
• 作用 : 本地安裝的包, 發(fā)布上線階段 要用到的庫
• 依賴位置 : 把包的依賴添加到 dependencies中
• 比如 : npm i axios

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

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

4. 淘寶鏡像

• 方式1 : 直接命令

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

• 方式2 : nrm

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

5. package.json 的介紹

npm init -y

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

• 配置自定義腳本
  • 創(chuàng)建一個(gè) index.js =>console.log('測(cè)試啟動(dòng)腳本')
  • 執(zhí)行 : node index.js
  • 也可以通過運(yùn)行腳本來執(zhí)行命令 (優(yōu)勢(shì) 如果配置太多 手動(dòng)就不好處理了)
• 常見腳本

"scripts": {"build": "node index.js","dev": "node index.js","serve": "node index.js", } // 像以上這幾種運(yùn)行腳本 : 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打包的基本使用

本地安裝

創(chuàng)建項(xiàng)目名稱 webacpk-demo : 不能是大寫 不能是webpack

使用npm init -y生成package.json :

創(chuàng)建兩個(gè)文件夾 src/(源代碼文件夾) 和 dist/(最終打包輸出的文件夾)

在 src 里面創(chuàng)建一個(gè) index.js 文件 (準(zhǔn)備要被打包的入口文件)

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

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

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

添加腳本 : build

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

打包運(yùn)行命令 :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配置項(xiàng)
  • development : 開發(fā)階段 (不壓縮)
  • production : 發(fā)布階段 (壓縮)
• 配置

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

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

使用一個(gè)配置文件

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

根目錄 創(chuàng)建一個(gè)配置文件 : webpack.config.js

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

添加配置

// 因?yàn)?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', }

修改腳本

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

4. 隔行變色案例

創(chuàng)建 : src/index.html

隔行案例結(jié)構(gòu) => ul>li{我是li $}* 10

安裝 jquery : npm i jquery

引入 jquery 和 設(shè)置樣式 (ok)

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

使用 es6 的模塊化語法 import

// 使用ES6的模塊化語法 import $ from 'jquery' # 優(yōu)點(diǎn): 不用沿著路徑去找 # 瀏覽器不支持import語法 報(bào)錯(cuò) .... // 語法報(bào)錯(cuò)

打包 : npm run build

引入 打包后的文件

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

code記得保存一份

5. 插件: html-webpack-plugin

html-webpack-plugin

作用 :

能夠根據(jù)指定的模板文件 (index.html),自動(dòng)生成一個(gè)新的 index.html,并且注入到dist文件夾下

能夠自動(dòng)引入js文件

安裝 :

npm i html-webpack-plugin -D

配置 :

第一步: 引入模塊 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文件

創(chuàng)建一個(gè)css文件 : src/css/index.css

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

index.js 中引入

import './css/index.css'

安裝 : npm i style-loader css-loader -D

配置

// loader module: {rules: [//1.處理 css// 注意點(diǎn) use執(zhí)行l(wèi)oader 順序 從右往左// css-loader : 讀取css文件內(nèi)容,將其轉(zhuǎn)化為一個(gè)模塊// style-loader : 拿到模塊, 創(chuàng)建一個(gè)style標(biāo)簽,插入頁面中{ test: /\.css$/, use: ['style-loader', 'css-loader'] }] }

重啟 npm run dev

2. 處理 less 文件

創(chuàng)建一個(gè) less 文件 : src/css/index.less

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

index.js 中引入

import './css/index.less'

安裝 : npm i less-loader less style-loader css-loader -D

配置

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

重啟 npm run dev

3. 處理圖片

創(chuàng)建src/images/, 引入兩種圖片 01.png 和 1.gif

在index.css中設(shè)置背景圖片

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

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

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

配置 :

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

4. url-loader 和 file-loader

4.1通過 npm run build 打?qū)嶓w閉演示區(qū)別

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

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

注意 : Base64 的好處是能夠減少一個(gè)圖片的 HTTP 請(qǐng)求，然而，與之同時(shí)付出的代價(jià)則是 CSS 文件體積的增大。

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

CSS 文件的體積直接影響渲染，導(dǎo)致用戶會(huì)長時(shí)間注視空白屏幕

• file-loader 不會(huì)把圖片打包到 bundle.js中，而是單獨(dú)的生成了一個(gè)張圖片

劣勢(shì) : 單獨(dú)生成一個(gè)圖片, 就要多發(fā)送一個(gè)圖片的 http請(qǐng)求

4.2 最終方案

方案 :

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

? 如果圖片大的話 就使用file-loader單獨(dú)生成一個(gè)圖片文件

配置

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

添加limit配置

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

可以 build演示

5. 處理 字體 文件

準(zhǔn)備字體圖標(biāo): 字體圖標(biāo)文件 iconfont 或者 從阿里矢量圖標(biāo)里下載

在 index.js 中引入 css 文件

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

使用 :

在 webpack.config.js 中配置

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

提取文件

1. 提取css到css文件夾

提取css文件

安裝 : npm i mini-css-extract-plugin -D

配置

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

自定義css文件名

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

添加公共路徑

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

現(xiàn)在的css文件

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

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

{test: /\.(eot|woff|svg|ttf)$/,use: {loader: 'url-loader',// loader的參數(shù)配置options: {// 范圍 30k 1kb = 2014字節(jié)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',},},], },

開發(fā)階段

1. webpack-dev-server

作用 : 為使用 webpack 打包提供一個(gè)服務(wù)器環(huán)境

? 1 自動(dòng)為我們的項(xiàng)目創(chuàng)建一個(gè)服務(wù)器

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

? 3 自動(dòng)監(jiān)視文件變化,自動(dòng)刷新瀏覽器…

安裝 :npm i webpack-dev-server -D

添加一個(gè)腳本 dev

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

運(yùn)行腳本 :

運(yùn)行 :npm run serve結(jié)果 : i ｢wdm｣: Compiled successfully.查看 : Project is running at http://localhost:8080/

作用演示 :

# 自動(dòng)打開瀏覽器devServer: {open: true } # 自動(dòng)監(jiān)視文件變化 + 自動(dòng)刷新 $('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的使用區(qū)別

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

• npm run serve

開發(fā)模式 : => 開發(fā)項(xiàng)目中使用 , 不會(huì)打包出實(shí)體文件, 打包到內(nèi)存中, 這樣能夠及時(shí)監(jiān)視更新

• npm run build

發(fā)布上線使用 1 執(zhí)行 : `npm run build` 對(duì)項(xiàng)目進(jìn)行打包,生成dist文件 2 模擬本地服務(wù)器 : 安裝 : `npm i -g live-server` 3 把dist文件里的內(nèi)容放到服務(wù)器里即可, 直接運(yùn)行`live-server`

處理es6語法

現(xiàn)在的項(xiàng)目都是使用 ES6 開發(fā)的, 但是這些新的 ES6 語法, 并不是所有的瀏覽器都支持, 所以就需要有一個(gè)工具,幫我們轉(zhuǎn)成 es5 語法, 這個(gè)就是: babel

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

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

babel 英文網(wǎng)

babel中文網(wǎng)

webpack-babel-loader

安裝 :

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

配置

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

或者 創(chuàng)建 .babelrc

{"presets": ["env"] }

模塊化語法 (webpack-import)

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

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

2. 介紹

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

3. 導(dǎo)出一個(gè)變量

• 導(dǎo)出一個(gè)變量

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. 導(dǎo)出多個(gè)變量

• 導(dǎo)出多個(gè)變量

// 導(dǎo)出多個(gè) 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環(huán)境文件 : webpack.config.js + package.json
• 注冊(cè)組件

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

• 提出一個(gè)對(duì)象到一個(gè)模塊中

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

• 改在 單文件組件

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

• 添加 結(jié)構(gòu)和樣式

<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官網(wǎng) => vue-loader

vue-loader

安裝:

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

配置

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

3. 安裝vscode插件 : Vetur

• 高亮
• 有提示 : 輸入vue

打包安裝模塊出錯(cuò): 安裝版本低的模塊即可

> npm install 模塊名稱@版本號(hào) --save-dev

如：

npm install webpack@3.8.1 --save-dev

總結(jié)

以上是生活随笔為你收集整理的webpack — 概述 （2）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。