Webpack安裝以及快速入門

3 Webpack

1 什么是Webpack

https://webpack.js.org/ (官網)

webpack 是一個現代 javascript 應用程序的 靜態模塊打包器 (module bundler)

待會要學的 vue-cli 腳手架環境, 集成了 webpack, 所以才能對各類文件進行打包處理

在這里插入圖片描述

webpack是一個 靜態模塊 打包器,可以做以下的這些工作

  1. 語法轉換(主要是瀏覽器兼容)

    • less/sass轉換成css
    • ES6轉換成ES5
    • …

  2. html/css/js 代碼壓縮合并 (打包)

  3. webpack可以在開發期間提供一個開發服務器

可以把它看成maven中工程自動化那部分(jar) ,前端項目也是先打包再上線

2 Webpack安裝

全局安裝

cnpm install webpack@4.41.5 -g
cnpm install webpack-cli@3.3.12 -g

安裝后查看版本號

webpack -v
webpack-cli -v

3 快速入門 (js打包)

方式一：webpack原始方式

（1）新建文件夾 work3，在創建src文件夾，創建 bar.js

exports.info=function(str){document.write(str);
}

（2）src下創建logic.js

exports.add=function(a,b){return a+b;
}

（3）src下創建main.js

var bar= require('./bar');
var logic= require('./logic');
bar.info( 'Hello world!'+ logic.add(100,200));

說明：上述具有多個js文件，那么我們在實際開發中使用的時候會導入過多的js文件，使用起來不方便，那么我們可以將上述多個js文件打包成一個js文件。

（4）創建配置文件webpack.config.js ，該文件與src處于同級目錄

var path = require("path"); // 導入 node.js 中專門操作路徑的模塊，固定寫法
//執行webpack命令的時候會讀取到module.exports中的內容
module.exports = {//執行webpack命令的時候,讀取入口main.js，由于main.js關聯bar.js和logic.js，所以會將這三個js文件合并到一個js文件中entry: './src/main.js', // 打包入口文件的路徑//輸出文件位置output: {//__dirname表示當前工程目錄path: path.resolve(__dirname, './dist'),  // 輸出文件的存放路徑filename: 'bundle.js'  // 輸出文件的名稱}
};

以上代碼的意思是：讀取當前目錄下src文件夾中的main.js（入口文件）內容，把對應的js文件打包，打包后的文件放入當前目錄的dist文件夾下，打包后的js文件名為bundle.js

webpack 的 4.x 版本中默認約定：

  • 打包的入口文件為 src -> main.js
  • 打包的輸出文件為 dist -> index.js

（5）執行編譯命令

webpack

執行后查看bundle.js 會發現里面包含了上面兩個js文件的內容

（6）創建index.html ,引用bundle.js

<!doctype html>
<html><head>  </head><body>   <script src="dist/bundle.js"></script></body>
</html>`

創建完畢,完整目錄如下

在這里插入圖片描述

測試調用index.html，會發現有內容輸出：Hello world!300

方式二：基于NPM方式

  1. 新建項目空白目錄，并運行npm init –y 命令，初始化包管理配置文件package.json

    -y 可以直接跳過配置

    在這里插入圖片描述

  2. 新建 src 源代碼目錄,并且把 bar.js 和 logic.js 和 main.js 文件復制到 src目錄

  3. 創建index.html ,引用bundle.js

    <!doctype html>
<html><head>  </head><body>   <script src="dist/bundle.js"></script></body>
</html>

  4. 運行 npm install webpack webpack-cli 命令，安裝webpack相關的包

    如果全局安裝過webpack 和 webpack-cli工具, 此步驟可跳過

  5. 在項目根目錄中，創建名為webpack.config.js 的 webpack配置文件同上

    var path = require("path");
module.exports = {mode: 'development', // mode 用來指定構建模式development、productionentry: './src/main.js',output: {path: path.resolve(__dirname, './dist'),filename: 'bundle.js'}
};

    mode: ‘development’ //mode 用來指定構建模式、production：生產模式（壓縮）

  6. 在 package.json 配置文件中的scripts節點下，新增dev腳本如下：

    {"name": "work4","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack"  //script 節點下的腳本，可以通過 npm run 執行},"keywords": [],"author": "","license": "ISC"
}

    完整代碼結構：

    在這里插入圖片描述

    在終端中運行 npm run dev 命令，啟動webpack進行項目打包。

    在這里插入圖片描述

    注意是在package.json 包下運行該命令

    點擊index.html文件查看結果, 會發現有內容輸出：`Hello world!300

    說明：使用npm命令運行的原因是后期使用webpack命令的時候，命令會很多，不僅僅只有webpack幾個字母，不好記，而使用：npm run dev命令執行無論webpack命令有多少都會執行。

4 webpack-dev-server 開發服務器

4.1 介紹

修改main.js代碼如下：

在這里插入圖片描述

需要每次在修改源碼之前需要重新打包：

在這里插入圖片描述

每次修改代碼, 都需要重新打包, 才能看到最新的效果, 且實際工作中, 打包非常費時 (30s - 60s) 之間

為什么費時?

  1. 構建依賴
  2. 讀取對應的文件, 才能加載
  3. 用對應的 loader 進行處理
  4. 將處理完的內容, 寫入到 dist 目錄

簡而言之就是我們希望修改源碼完畢之后，不用再每次重新打包，運行的結果直接是修改后的結果。

解決方案：我們可以開啟一個開發服務器webpack-dev-server, 在電腦內存中打包, 緩存一些已經打包過的內容, 只重新打包修改的文件 (熱更新)

4.2 使用

如果模塊(work3)下，沒有package.json 文件，那么需要在模塊下初始化命令：npm init即可

  1. 修改 package.json -> scripts 中的 dev, dependencies, devDependencies如下：

    devDependencies這是開發時依賴, 上線不依賴

{"name": "work4","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack-dev-server"},"keywords": [],"author": "","license": "ISC","dependencies": {"webpack": "^4.41.5","webpack-cli": "^3.3.12"},"devDependencies": { "webpack-dev-server": "^3.11.2"}
}

然后運行 cnpm install 指令,安裝webpack,webpack-cli 和 webpack-dev-server

  1. 修改 webpack.config.js 文件,添加 devServer
var path = require("path");
module.exports = {mode: 'development', // mode 用來指定構建模式development、productionentry: './src/main.js',devServer: {port: 8099,// 服務器占用8099端口open: true  // 自動打開瀏覽器},output: {path: path.resolve(__dirname, './dist'),filename: 'bundle.js'}
};

  1. 刪除之前的dist目錄

  2. 將 index.html 中，script 腳本的引用路徑

    <!doctype html>
<html><head>  </head><body>   <!-- 內存中讀取 --><script src="/bundle.js"></script></body>
</html>

  3. 運行 npm run dev 命令

  4. 在瀏覽器中訪問 http://localhost:8099地址，查看自動打包效果

webpack-dev-server 會啟動一個實時打包的 http 服務器

webpack-dev-server 打包生成的輸出文件，默認放到了項目根目錄中，基于內存

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/diannao/42823.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/42823.shtml
英文地址，請注明出處：http://en.pswp.cn/diannao/42823.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Spring Boot (9)：AOP實戰經驗

Spring Boot (9)：AOP實戰經驗

1 概述 介紹完Spring AOP所具備的功能特性&#xff0c;接下來&#xff0c;看一下再應用程序中使用AOP時應該遵循哪些最佳實踐。 2 活用切點表達式 Spring AOP的一大特色在于在開發人員提供了非常靈活的切點機制。Spring在編譯期間處理切入點&#xff0c;并嘗試進行優化匹配。然…
閱讀更多...
計算機的錯誤計算（二十四）

計算機的錯誤計算（二十四）

摘要 計算機的錯誤計算&#xff08;二十一&#xff09;就案例 展示了“兩個不相等數相減&#xff0c;差為0”。本節給出新的計算過程&#xff1a;不停增加計算精度直到出現非0結果。這個過程與結果表明&#xff0c;即使是專業數學軟件&#xff0c;對這個問題的處理&#xff0…
閱讀更多...
1 HTML and CSS

1 HTML and CSS

HTMl(超文本標記語言) HTML 概述 超文本標記語言用來描述和定義網頁的內容 HTML(超文本標記語言——HyperText Markup Language)是構成 Web 世界的一磚一瓦;它定義了網頁內容的含義和結構 “超文本”(hypertext)是指連接單個網站內或多個網站間的網頁的鏈接 1. HTML標簽功能區分…
閱讀更多...
Qt之多線程編程(QThread)

Qt之多線程編程(QThread)

文章目錄 前言Qt多線程的基本使用如何移動線程常用的一些函數示例代碼總結 前言 在現代計算機系統中&#xff0c;多線程編程已經成為一種常見的編程模式&#xff0c;它可以有效地利用多核處理器的計算能力&#xff0c;提高程序的執行效率。Qt作為一種跨平臺的應用程序開發框架…
閱讀更多...
【ffmpeg系列一】源碼構建，ubuntu22與win10下的過程對比。

【ffmpeg系列一】源碼構建，ubuntu22與win10下的過程對比。

文章目錄 背景ubuntu22結論 win10過程 對比結論 背景 順手編譯個ffmpeg試試&#xff0c;看看不同平臺下誰的配置比較繁瑣。 先讓gpt給出個教程&#xff1a; ubuntu22 使用elementary-os7.1構建&#xff0c;看看有幾個坑要踩。 錯誤1&#xff1a; 依賴libavresample-dev未…
閱讀更多...
Linux-學習-05-openssl安裝與卸載

Linux-學習-05-openssl安裝與卸載

目錄 一、環境信息 二、卸載步驟 1、使用包管理器卸載 三、安裝步驟 1、下載OpenSSL源代碼 2、解壓并進入目錄 3、配置、編譯和安裝 4、更新軟鏈接 5、更新共享庫緩存 6、/etc/profile添加環境變量 7、環境變量生效 8、openSSL版本驗證 一、環境信息 名稱值CPUInte…
閱讀更多...
【人工智能】-- 智能家居

【人工智能】-- 智能家居

個人主頁&#xff1a;歡迎來到 Papicatch的博客 課設專欄 &#xff1a;學生成績管理系統 專業知識專欄&#xff1a; 專業知識 文章目錄 &#x1f349;引言 &#x1f349;基于深度卷積神經網絡的表情識別 &#x1f348;流程圖 &#x1f348;模型設計 &#x1f34d;網絡架…
閱讀更多...
[圖解]企業應用架構模式2024新譯本講解24-標識映射3

[圖解]企業應用架構模式2024新譯本講解24-標識映射3

1 00:00:00,460 --> 00:00:02,580 超類定義了一個抽象方法 2 00:00:03,170 --> 00:00:03,450 3 00:00:06,410 --> 00:00:09,690 把reader內容 4 00:00:10,870 --> 00:00:12,350 把它變成一個領域對象 5 00:00:13,690 --> 00:00:15,800 但這里只是把它變成一個…
閱讀更多...
python安裝PyTorch+cuda

python安裝PyTorch+cuda

1,最終結果 import torchprint(torch.cuda.is_available()) #顯示True&#xff0c;則安裝成功 print(torch.__version__)#打印當前PyTorch版本號。 print(torch.version.cuda)#打印當前CUDA版本號。 print(torch.backends.cudnn.version())# 打印當前cuDNN版本號。 print(torc…
閱讀更多...
Ruby 語法

Ruby 語法

Ruby 語法 Ruby 是一種動態、開放源代碼的編程語言，由日本的松本行弘（Yukihiro Matsumoto）于1995年開發。Ruby 的設計哲學強調簡潔和效率，同時也是一種表達力強的語言。它結合了多種編程語言的特性，包括 Perl、Smalltalk、Eiffel、Ada 和 Lisp。Ruby 的語法簡單直觀，使得…
閱讀更多...
【愛上C++】vector用法詳解

【愛上C++】vector用法詳解

文章目錄 一:vector簡介二:vector的創建和初始化三:vector的遍歷1.[]下標2.at()3.迭代器遍歷4.范圍for 四:vector的空間1.size2.max_size3.capacity4.reserve5.resize6.empty 五:vector的增刪查改1.push_back2.pop_back3.find4.insert5.erase6.swap7.assign Hello~同學們好&…
閱讀更多...
mAP（平均精度均值）全面解讀：評估目標檢測性能的黃金標準

mAP（平均精度均值）全面解讀：評估目標檢測性能的黃金標準

mAP&#xff08;平均精度均值&#xff09;全面解讀&#xff1a;評估目標檢測性能的黃金標準 在目標檢測領域&#xff0c;評估模型性能是至關重要的一步。mAP&#xff08;mean Average Precision&#xff0c;平均精度均值&#xff09;作為目標檢測任務中一個關鍵的性能評估指標…
閱讀更多...
搭建純凈的SpringBoot工程

搭建純凈的SpringBoot工程

pom文件 <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVe…
閱讀更多...
docker nginx mysql redis

docker nginx mysql redis

啟動沒有數據卷的nginx docker run -d -p 86:80 --name my-nginx nginx把/etc/nginx中的配置復制到宿主機 docker cp my-nginx:/etc/nginx /home/nginxlkl把/html 中的文件復制到宿主機 docker cp my-nginx:/etc/nginx /home/nginxlkl刪除當前鏡像 docker rm -f my-nginx重新起…
閱讀更多...
ArrayList,Vector, LinkedList的存儲性能和特性舉例說明

ArrayList,Vector, LinkedList的存儲性能和特性舉例說明

ArrayList、Vector、LinkedList是Java中常用的三種集合類型&#xff0c;它們各自具有不同的存儲性能和特性。下面將分別舉例說明這三種集合的存儲性能和特性&#xff1a; ArrayList 存儲性能與特性&#xff1a; 底層實現&#xff1a;ArrayList底層是通過數組實現的&#xff…
閱讀更多...
Solidity：變量數據存儲和作用域 storage/memory/calldata

Solidity：變量數據存儲和作用域 storage/memory/calldata

Solidity中的引用類型? 引用類型(Reference Type)&#xff1a;包括數組&#xff08;array&#xff09;和結構體&#xff08;struct&#xff09;&#xff0c;由于這類變量比較復雜&#xff0c;占用存儲空間大&#xff0c;我們在使用時必須要聲明數據存儲的位置。 數據位置? …
閱讀更多...
HarmonyOS ArkUi 字符串＜展開/收起＞功能

HarmonyOS ArkUi 字符串＜展開/收起＞功能

效果圖&#xff1a; 官方API&#xff1a; ohos.measure (文本計算) 方式一 measure.measureTextSize 跟方式二使用一樣&#xff0c;只是API調用不同&#xff0c;可仔細查看官網方式二 API 12 Preview Component export struct CustomTextSpan {State maxLines: number 1/…
閱讀更多...
迭代器模式(大話設計模式)C/C++版本

迭代器模式(大話設計模式)C/C++版本

迭代器模式 C #include <iostream> #include <string> #include <vector>using namespace std;// 迭代抽象類,用于定義得到開始對象、得到下一個對象、判斷是否到結尾、當前對象等抽象方法&#xff0c;統一接口 class Iterator { public:Iterator(){};virtu…
閱讀更多...
作為產品經理，如何用大模型給我們賦能？非常詳細，收藏我這篇就夠了

作為產品經理，如何用大模型給我們賦能？非常詳細，收藏我這篇就夠了

作為一名產品經理&#xff0c;如果您考慮轉行至大模型領域&#xff0c;您將能夠將產品管理技能與大模型技術相結合&#xff0c;從而在產品開發和創新方面獲得一系列好處。以下是轉行大模型對產品經理的一些潛在益處&#xff1a; 更深入的技術理解&#xff1a;了解大模型技術將…
閱讀更多...
LeetCode 1351, 1, 208

LeetCode 1351, 1, 208

目錄 1351. 統計有序矩陣中的負數題目鏈接標簽簡答二分查找思路代碼 優化思路代碼 1. 兩數之和題目鏈接標簽思路代碼 208. 實現 Trie (前綴樹)題目鏈接標簽思路代碼 1351. 統計有序矩陣中的負數 題目鏈接 1351. 統計有序矩陣中的負數 標簽 數組 二分查找 矩陣 簡答二分查找…
閱讀更多...
最新文章

Copyright @ 2022~2023