快捷導(dǎo)航

Vue?webpack的基本使用示例教程

更新時(shí)間：2022年12月22日 12:48:22 作者：堅(jiān)毅的小解同志

這篇文章主要介紹了Vue?webpack的基本使用,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

理解什么是前端工程化
- 轉(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過來
需要操作DOM或發(fā)起Ajax，再拽一個(gè)jquery過來
需要快速實(shí)現(xiàn)網(wǎng)頁(yè)布局效果，就拽一個(gè)Layui過來
實(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
通過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)沒有效果，這時(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è)疑問，就是打包的時(shí)候?yàn)槭裁磿?huì)打包index.js這個(gè)文件，它是怎么尋找的路徑等問題。

在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配置文件中，通過entry節(jié)點(diǎn)指定打包的入口，通過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文件之后，需要重新打包才能有效，每修改一次都要重新打包一次，這就很麻煩我們可以通過安裝和配置第三方的插件，可以擴(kuò)展webpack的能力，從而讓webpack用起來更方便，常用的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è)模板引擎插件”），
可以通過此插件自定制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)目打包在瀏覽器中訪問本地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并沒有變化，那是因?yàn)閙ain.js實(shí)際上沒有修改，訪問自動(dòng)打包修改后的頁(yè)面需要訪問本地8080端口

在這里插入圖片描述

在這個(gè)http服務(wù)器內(nèi)才能訪問到修改后的內(nèi)容，我們前面說了修改后的js并沒有保存到main.js中，那它保存到哪里去了？它其實(shí)被保存到了根目錄中，以內(nèi)存的形式進(jìn)行了保存。

在這里插入圖片描述

文件名跟你前面設(shè)置的打包文件名一樣，雖然看不到這個(gè)文件但是可以進(jì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ù)器后，顯示的是根目錄，需要點(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ù)組，將來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是用來開發(fā)實(shí)時(shí)瀏覽觀看內(nèi)容的，dev2是用來進(jìn)行物理打包的（當(dāng)你完成項(xiàng)目需要打包的時(shí)候）。

在這里插入圖片描述

這里我需要說一下html-webpack-plugin這個(gè)插件，上面我們可以直接看到頁(yè)面是因?yàn)檫@個(gè)插件復(fù)制了一份兒index.html到根目錄所以可以直接訪問。
這個(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配置文件中，可以通過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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Vue?webpack的基本使用示例教程

目錄

前端工程化

小白眼中的前端開發(fā) vs 實(shí)際的前端開發(fā)

什么是前端工程化

前端工程化的解決方案

webpack的基本使用

什么是webpack

列表隔行變色項(xiàng)目

在項(xiàng)目中安裝并配置webpack

webpack.config.js的作用

webpack中的插件

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具