Vue?webpack的基本使用示例教程
- 理解什么是前端工程化
- 轉(zhuǎn)變對(duì)前端開發(fā)的認(rèn)知
- 了解webpack的基本用法
- 為后面Vue和React課程的學(xué)習(xí)做技術(shù)儲(chǔ)備
- 不強(qiáng)制要求大家能手動(dòng)配置 webpack
- 一定要知道webpack在項(xiàng)目中有什么作用
- 清除webpack中的核心概念
前端工程化
小白眼中的前端開發(fā) vs 實(shí)際的前端開發(fā)
小白眼中的前端開發(fā)
會(huì)寫HTML + CSS +JavaScript就會(huì)前端開發(fā)
需要美化頁(yè)面樣式，就拽一個(gè)bootstrap過(guò)來(lái)
需要操作DOM或發(fā)起Ajax，再拽一個(gè)jquery過(guò)來(lái)
需要快速實(shí)現(xiàn)網(wǎng)頁(yè)布局效果，就拽一個(gè)Layui過(guò)來(lái)
實(shí)際的前端開發(fā)
模塊化（js的模塊化，css的模塊化，資源的模塊化）
組件化（復(fù)用現(xiàn)有的UI結(jié)構(gòu)，樣式，行為）
規(guī)范化（目錄結(jié)構(gòu)的劃分，編碼規(guī)范化，接口規(guī)范化，文檔規(guī)范化，Git分支管理）
自動(dòng)化（自動(dòng)化構(gòu)建，自動(dòng)部署，自動(dòng)化測(cè)試）
什么是前端工程化
前端工程化指的是：在企業(yè)級(jí)的前端項(xiàng)目開發(fā)中，把前端開發(fā)所謂的工具，技術(shù)，流程，經(jīng)驗(yàn)等進(jìn)行規(guī)范化，標(biāo)準(zhǔn)化。
企業(yè)中的Vue項(xiàng)目和React項(xiàng)目，都是基于工程畫的方式進(jìn)行開發(fā)。
好處：前端開發(fā)自成體系，有一套標(biāo)準(zhǔn)的開發(fā)方案和流量。
前端工程化的解決方案
- 早期的前端工程化解決方案
- grunt
- gulp
- 目前主流的前端工程化解決方案
- webpack
- parcel
webpack的基本使用
什么是webpack
概念： webpack是前端項(xiàng)目工程化的具體解決方案。
主要功能：它提供了友好的前端模塊化開發(fā)支持，以及代碼壓縮混淆，處理瀏覽器端JavaScript的兼容性性能優(yōu)化等強(qiáng)大的功能。
好處：讓程序員把工作的重心放到具體功能的實(shí)現(xiàn)上，提高了前端開發(fā)效率和項(xiàng)目的可維護(hù)性。
注意：目前Vue，React等前端項(xiàng)目，基本上都是基于webpack進(jìn)行工程化開發(fā)的。
列表隔行變色項(xiàng)目
步驟
- 新建項(xiàng)目空白目錄，并運(yùn)行npm init -y命令，初始化包管理配置文件package.json
- 新建src源代碼目錄
- 新建src->index.html首頁(yè)和src->index.js腳本文件
- 初始化首頁(yè)基本的結(jié)構(gòu)
- 運(yùn)行npm install jquery -s命令，安裝jQuery
- 通過(guò)ES6模塊化的方式導(dǎo)入jQuery，實(shí)現(xiàn)列表隔行變色的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
ul>li{這是第$個(gè)li}*9
</body>
</html>
import和require導(dǎo)入模塊的區(qū)別
1、require對(duì)應(yīng)導(dǎo)出的方法是module.exports,
import對(duì)應(yīng)的方法是export default/export
2、require 是CommonJs的語(yǔ)法
import 是 ES6 的語(yǔ)法標(biāo)準(zhǔn)。
3、require是運(yùn)行運(yùn)行時(shí)加載模塊里的所有方法（動(dòng)態(tài)加載），
import 是編譯的時(shí)候調(diào)用（靜態(tài)加載），不管在哪里引用都會(huì)提升到代碼頂部。
4、require 是CommonJs的語(yǔ)法，引入的是的是整個(gè)模塊里面的對(duì)象，
import 可以按需引入模塊里面的對(duì)象
5、require 導(dǎo)出是值的拷貝,
import 導(dǎo)出的是值的引用
6. require是node.js帶有的 CommonJS語(yǔ)法里的東西，可以在終端中運(yùn)行
如果要在瀏覽器端運(yùn)行 我們要使用import這個(gè)es6語(yǔ)法
js代碼
//導(dǎo)入模塊
// const $ = require('jquery')
import $ from "jquery";
//定義jquery入口函數(shù)
$(function () {
$('li:odd').css('background-Color', 'red')
$('li:even').css('background-Color', 'pink')
})將js文件導(dǎo)入index.html之后，發(fā)現(xiàn)沒(méi)有效果，這時(shí)我們就需要webpack工具了，將語(yǔ)法進(jìn)行重新編譯，把es6語(yǔ)法轉(zhuǎn)化為es5語(yǔ)法。
在項(xiàng)目中安裝并配置webpack
npm i webpack@5.42.1 webpack-cli -D
生產(chǎn)依賴
創(chuàng)建webpack.config.js配置文件并寫入
//使用node.js的導(dǎo)出語(yǔ)法向外導(dǎo)出一個(gè)webpack的配置對(duì)象
//導(dǎo)入模塊并進(jìn)行導(dǎo)出內(nèi)容，這樣寫會(huì)比直接導(dǎo)出內(nèi)容多一個(gè)記錄信息的txt文件，當(dāng)然我們也可以使用es6語(yǔ)法進(jìn)行導(dǎo)入導(dǎo)出，大家可以私下去了解。
const { Module } = require("webpack");
Module.export = {
mode: 'development'
}
//也可以直接導(dǎo)出內(nèi)容
// module.export = {
// mode: 'development'
// }在package.json配置文件中的script中寫入聲明
最后執(zhí)行npm命令進(jìn)行編譯，有一個(gè)注意點(diǎn)就是node.js版本需要是17版本以下的不然會(huì)出錯(cuò)，當(dāng)然應(yīng)該有其他解決辦法，但博主不會(huì)，只好退回版本
執(zhí)行 npm run dev 這個(gè)命令，可以看到src里的index.js和jquery.js都被壓縮了。
會(huì)生成一個(gè)編譯后的文件夾
將main.js文件導(dǎo)入index.html.，不用導(dǎo)入index.js。
打開頁(yè)面就可以成功顯示了
mode的可選值
mode節(jié)點(diǎn)的可選值有兩個(gè)，分別是：
1.development
- 開發(fā)環(huán)境
- 不會(huì)對(duì)打包生成的文件進(jìn)行代碼壓縮和性能優(yōu)化
- 打包速度快，適合在開發(fā)階段使用。
2.production
- 生產(chǎn)環(huán)境
- 會(huì)對(duì)打包生成的文件進(jìn)行代碼壓縮和性能優(yōu)化
- 打包速度很慢，僅適合在項(xiàng)目發(fā)布階段使用
- 開發(fā)的時(shí)候使用development，打包速度快，上線的時(shí)候使用production，體積小。
webpack.config.js的作用
當(dāng)我們使用npm run dev這個(gè)命令的時(shí)候，會(huì)執(zhí)行package里的dev里的內(nèi)容，
dev里寫的webpack，那么它就會(huì)執(zhí)行weboack.config.js這個(gè)文件里的內(nèi)容，根據(jù)里面的內(nèi)容再進(jìn)行打包。
webpack中的默認(rèn)約定
大家可能有個(gè)疑問(wèn)，就是打包的時(shí)候?yàn)槭裁磿?huì)打包index.js這個(gè)文件，它是怎么尋找的路徑等問(wèn)題。
在webpack4和5的版本中，有如下的默認(rèn)約定，找不到就會(huì)報(bào)錯(cuò)。
- 默認(rèn)的打包入口文件為src -> index.js
- 默認(rèn)的輸出文件路徑為dist -> main.js
注意：可以在webpack.config.js中修改打包的默認(rèn)約定。
自定義打包的入口和出口
在webpack.config.js配置文件中，通過(guò)entry節(jié)點(diǎn)指定打包的入口，通過(guò)output節(jié)點(diǎn)指定打包的出口文件夾和出口文件。
// 使用node.js的導(dǎo)出語(yǔ)法向外導(dǎo)出一個(gè)webpack的配置對(duì)象
const path = require("path");
module.exports = {
mode: 'development',
entry: path.join(__dirname, 'src/index.js'),
//設(shè)置打包輸出路徑，以及輸入文件名稱
output: {
//指定存放目錄
path: path.join(__dirname, 'dist1'),
filename: 'new.js'
}
}生成的文件就變了。
webpack中的插件
當(dāng)我們修改js文件之后，需要重新打包才能有效，每修改一次都要重新打包一次，這就很麻煩我們可以 通過(guò)安裝和配置第三方的插件，可以擴(kuò)展webpack的能力，從而讓webpack用起來(lái)更方便，常用的webpack插件有如下兩個(gè)：
1.webpack-dev-server
- 類似于node.js階段用到的nodemon工具。
- 每當(dāng)修改了源代碼，webpack會(huì)自動(dòng)進(jìn)行項(xiàng)目的打包和構(gòu)建。
2.html-webpack-plugin
- webpack中的html插件（“類似于一個(gè)模板引擎插件”），
- 可以通過(guò)此插件自定制index.html頁(yè)面的內(nèi)容。
webpack-dev-server
安裝webpack-dev-server
安裝命令 npm install webpack-dev-server@3.11.2 -D
配置webpack-dev-server
1.重新配置package.json中的script里的dev內(nèi)容
2.再次運(yùn)行 npm run dev命令，重新進(jìn)行項(xiàng)目打包在瀏覽器中訪問(wèn)本地8080端口，查看自動(dòng)打包效果。
3.注意：webpack-dev-server會(huì)啟動(dòng)一個(gè)實(shí)時(shí)打包的http服務(wù)器。
這樣當(dāng)我們每次修改index.js文件時(shí)，保存后就會(huì)自動(dòng)打包，摁兩次ctrl+c就可以終止運(yùn)行。
這種打包實(shí)際上時(shí)虛擬打包，并不是每次保存打包之后將main.js進(jìn)行了修改，當(dāng)我們修改代碼保存自動(dòng)打包之后，我們發(fā)現(xiàn)頁(yè)面UI并沒(méi)有變化，那是因?yàn)閙ain.js實(shí)際上沒(méi)有修改，訪問(wèn)自動(dòng)打包修改后的頁(yè)面需要訪問(wèn)本地8080端口
在這個(gè)http服務(wù)器內(nèi)才能訪問(wèn)到修改后的內(nèi)容，我們前面說(shuō)了修改后的js并沒(méi)有保存到main.js中，那它保存到哪里去了？它其實(shí)被保存到了根目錄中，以內(nèi)存的形式進(jìn)行了保存。
文件名跟你前面設(shè)置的打包文件名一樣，雖然看不到這個(gè)文件但是可以進(jìn)行訪問(wèn)，我們需要把頁(yè)面引入鏈接從 new.js改成新生成的保存到內(nèi)存中的new.js，完成這兩個(gè)步驟就可以真正的實(shí)現(xiàn)自動(dòng)打包并實(shí)時(shí)演示了。
html-webpack-plugin
當(dāng)我們開啟了自動(dòng)打包服務(wù)功能，訪問(wèn)服務(wù)器后，顯示的是根目錄，需要點(diǎn)擊一下文件夾，才能顯示頁(yè)面文件index.html，我們只需要把頁(yè)面文件copy一份兒到根目錄，這樣點(diǎn)開網(wǎng)頁(yè)就能直接顯示，這個(gè)webpack插件就可以實(shí)現(xiàn)相應(yīng)的功能。
安裝
npm install html-webpack-plugin@5.3.2 -D
使用代碼
//導(dǎo)入相應(yīng)模塊
const HtmlPluginConfig = require('html-webpack-plugin')
//實(shí)例化
const HtmlPlugin = new HtmlPluginConfig();
//實(shí)例化
const HtmlPlugin = new HtmlPluginConfig({
//被復(fù)制文件的路徑
template: './src/index.html',
//復(fù)制到哪
filename: './index.html'
});
//導(dǎo)入相應(yīng)模塊
const HtmlPluginConfig = require('html-webpack-plugin')
//實(shí)例化
const HtmlPlugin = new HtmlPluginConfig();
//實(shí)例化
const HtmlPlugin = new HtmlPluginConfig({
//被復(fù)制文件的路徑
template: './src/index.html',
//復(fù)制到哪
filename: './index.html'
});
最后再向外暴露對(duì)象
//插件的數(shù)組，將來(lái)webpack在運(yùn)行時(shí)，會(huì)加載并調(diào)用這些插件
plugins: [HtmlPlugin] //將實(shí)例化對(duì)象寫入。執(zhí)行 npm run dev命令，進(jìn)行自動(dòng)打包，然后進(jìn)入本地8080端口網(wǎng)頁(yè)，就可以直接看到頁(yè)面了。
當(dāng)你修改js之后也會(huì)實(shí)時(shí)更新。
注意點(diǎn)以及個(gè)人建議和理解
我們可以在scripts里設(shè)置兩個(gè)屬性，dev是用來(lái)開發(fā)實(shí)時(shí)瀏覽觀看內(nèi)容的，dev2是用來(lái)進(jìn)行物理打包的（當(dāng)你完成項(xiàng)目需要打包的時(shí)候）。
這里我需要說(shuō)一下html-webpack-plugin這個(gè)插件，上面我們可以直接看到頁(yè)面是因?yàn)檫@個(gè)插件復(fù)制了一份兒index.html到根目錄所以可以直接訪問(wèn)。
這個(gè)插件里面 有個(gè)屬性叫filename，就是你將文件復(fù)制到什么位置。
兩個(gè)注意點(diǎn)
第一個(gè)就是它的值，屬性值寫的相對(duì)路徑是根據(jù)你打包文件的位置為基準(zhǔn)的，并不是webpack.config.js的文件位置，./就跟你的new.js文件在同一個(gè)文件夾里，…/就在new.js的上級(jí)文件夾里，所以當(dāng)你打包的時(shí)候會(huì)發(fā)現(xiàn)除了new.js之外還有index.html
第二個(gè)就是輸出方式，如果執(zhí)行的是dev2，那么就跟new.js進(jìn)行物理復(fù)制，如果執(zhí)行的是dev那么就跟new.js一樣，以內(nèi)村存儲(chǔ)的方式進(jìn)行保存。
生成的html文件里會(huì)自動(dòng)導(dǎo)入同時(shí)打包的js文件
devServer節(jié)點(diǎn)
在webpack.config.js配置文件中，可以通過(guò)devServer節(jié)點(diǎn)對(duì)webpack-dev-server插件進(jìn)行更多配置。
其中有一些屬性設(shè)置可以更方便我們進(jìn)行開發(fā)。
devServer: {
open: true, //打包完成后默認(rèn)打開瀏覽器
port: 8080,//修改端口號(hào)
host: '127.0.0.1' //修改主機(jī)地址
}到此這篇關(guān)于Vue webpack的基本使用的文章就介紹到這了,更多相關(guān)Vue webpack使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue 二維碼長(zhǎng)按保存和復(fù)制內(nèi)容操作
這篇文章主要介紹了vue 二維碼長(zhǎng)按保存和復(fù)制內(nèi)容操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue-cli項(xiàng)目?jī)?yōu)化方法- 縮短首屏加載時(shí)間
這篇文章主要介紹了vue-cli項(xiàng)目?jī)?yōu)化 縮短首屏加載時(shí)間,需要的朋友可以參考下2018-04-04
vue如何封裝自己的Svg圖標(biāo)組件庫(kù)(svg-sprite-loader)
這篇文章主要介紹了vue如何封裝自己的Svg圖標(biāo)組件庫(kù)(svg-sprite-loader)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
今天小編就為大家分享一篇vue表單中遍歷表單操作按鈕的顯示隱藏示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
這篇文章主要介紹了element實(shí)現(xiàn)合并單元格通用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
vue單向以及雙向數(shù)據(jù)綁定方式(v-bind和v-model的使用)
這篇文章主要介紹了vue單向以及雙向數(shù)據(jù)綁定方式(v-bind和v-model的使用)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
本篇文章主要介紹了淺談vuex之mutation和action的基本使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
Vue零基礎(chǔ)入門之模板語(yǔ)法與數(shù)據(jù)綁定及Object.defineProperty方法詳解
這篇文章主要介紹了Vue初學(xué)基礎(chǔ)中的模板語(yǔ)法、數(shù)據(jù)綁定、Object.defineProperty方法等基礎(chǔ)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多條件和模糊搜索功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
vue如何使用el-table遍歷循環(huán)表頭和表體數(shù)據(jù)
這篇文章主要介紹了vue如何使用el-table遍歷循環(huán)表頭和表體數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04