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