webpack介紹—上

来源:https://www.cnblogs.com/jiekzou/archive/2020/06/18/13153662.html
-Advertisement-
Play Games

6.1 webpack概念的引入 在網頁中會引用哪些常見的靜態資源? JS .js、 .jsx 、.coffee、 .ts(TypeScript 類 C# 語言) CSS .css、 .less、 .sass 、.scss Images .jpg 、.png、 .gif 、.bmp 、.svg 字體 ...


6.1 webpack概念的引入

  在網頁中會引用哪些常見的靜態資源?

  • JS

  .js、 .jsx 、.coffee、 .ts(TypeScript 類 C# 語言)

  •  CSS

  .css、 .less、 .sass 、.scss

  • Images

  .jpg 、.png、 .gif 、.bmp 、.svg

  •  字體文件(Fonts)

  .svg、 .ttf、 .eot、 .woff、 .woff2

  •   模板文件

  .ejs 、.jade、 .vue(這是在webpack中定義組件的方式,推薦這麼用)

  說明:SCSS 是 Sass 3 引入新的語法,其語法完全相容 CSS3,並且繼承了 Sass 的強大功能。也就是說,任何標準的 CSS3 樣式表都是具有相同語義的有效的 SCSS 文件。另外,SCSS 還能識別大部分 CSS hacks(一些 CSS 小技巧)和特定於瀏覽器的語法。

  網頁中引入的靜態資源多了以後有什麼問題?

  • 網頁載入速度慢, 因為 我們要發起很多的二次請求;
  • 要處理錯綜複雜的依賴關係;

  如何解決上述兩個問題?

  • 合併、壓縮、精靈圖(雪碧圖)、圖片的Base64編碼;
  • 處理依賴關係可以使用requireJS、也可以使用webpack解決各個包之間的複雜依賴關係;

  對應的技術方案:

  • 使用Gulp進行壓縮合併, 它是基於 task 任務的;
  • 使用Webpack, 它是基於整個項目進行構建的;

  說明:並不是所有的圖片都適合採用Base64編碼,通常只有一些小圖片適合這樣做。

  如果我們的項目比較大的情況下,使用Gulp,會創建許多的task任務,比較麻煩。所以它通常適合一些小的模塊構建。

  什麼是精靈圖?

  css精靈(CSS sprites)是一種網頁圖片應用處理技術。主要是指將網頁中需要的零星的小圖片集成到一個大的圖片中。

  什麼是webpack?

  webpack 是前端的一個項目構建工具,它是基於 Node.js 開發出來的一個前端工具;藉助於webpack這個前端自動化構建工具,可以完美實現資源的合併、打包、壓縮、混淆等諸多功能。

webpack官網地址:http://webpack.github.io/

6.2 webpack-最基本的使用方式

  webpack安裝的兩種方式

  • 運行npm i webpack -g全局安裝webpack,這樣就能在全局使用webpack的命令。
  • 在項目根目錄中運行npm i webpack --save-dev安裝到項目依賴中。

  接下來,我們通過一個隔行變色的示例來演示webpack的基本使用。首先安裝webpack,然後新建一個項目,目錄如下圖所示:

  

   我們經常從網上下載一些第三方的安裝包的時候,也經常會看到dist目錄和src目錄,dist目錄是編譯後的文件目錄,src是源碼目錄。main.js這是項目的核心文件,全局的配置都在這個文件裡面配置,index.html是首頁入口文件。

  1. 安裝webpack:npm i webpack-g

  查看webpack版本:

  C:\Users\zouqi>webpack -v

  4.30.0

  2. 安裝jquery

  npm i jquery -S

  index.html代碼如下:

<div id="app">
        <ul>
            <li>馮錫範---一劍無血</li>
            <li>陳近南---平生不見陳近南,便稱英雄也枉然</li>
            <li>胡逸之---百勝刀王</li>
            <li>九難師太---獨臂神尼</li>
        </ul>
    </div>
    <script src="./main.js"></script>

  main.js代碼如下:

import $ from 'jquery'
$(function () {
  $('li:odd').css('backgroundColor', 'lightblue')
  $('li:even').css('backgroundColor', 'lightgreen')
})

  註意: 如果要通過路徑的形式,去引入 node_modules 中相關的文件,可以直接省略 路徑前面的 node_modules 這一層目錄,直接寫包的名稱,然後後面跟上具體的文件路徑。

  例如:import $ from 'jquery'等價於:

  import $ from '/node_modules/jquery/dist/jquery.js'

  此時,我們在瀏覽器中運行index.html,我們看下效果:

  

  我們會發現隔行變色無效,並且控制台報錯了。這是因為 import xx from xx 是ES6中導入模塊的方式,而 ES6的代碼太高級了,瀏覽器解析不了,所以這一行執行會報錯,如果想要瀏覽器能夠解析ES6的代碼,我們可以將其通過webpack編譯為瀏覽器可以解析的正常js語法。

  3.運行webpack打包

  webpack ./src/main.js --output-filename ./bundle.js --mode development

  解析:通過 webpack 這麼一個前端構建工具, 把 main.js 做了一下處理,生成了一個 bundle.js 的文件。

  運行結果如下所示:

PS D:\WorkSpace\vue_book\codes\chapter6\webpack-learn>
webpack ./src/main.js --output-filename ./bundle.js --mode development
Hash: 57bb64f9c2f92092305b
Version: webpack 4.30.0
Time: 381ms
Built at: 2019-05-08 20:30:17
      Asset     Size  Chunks             Chunk Names
./bundle.js  314 KiB    main  [emitted]  main
Entrypoint main = ./bundle.js
[./src/main.js] 138 bytes {main} [built]
    + 1 hidden module

  命令格式: webpack  要打包的文件的路徑 打包好的輸出文件的路徑 打包模式(webpack4新增)

  4. 修改index.html中的js引用

   <!-- <script src="./main.js"></script> -->

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

  運行結果如下:

   

  我們發現,在index.html中,我們只需要引入打包後的bundle.js這個文件,如果不採用webpack打包,我們直接在index.html頁面中引入文件,至少要引入兩個,一個是jquery.js,一個是main.js,而且這兩個文件我們可能還要單獨去進行代碼壓縮。

  註意:

  不推薦直接在index.html里引用任何包和任何CSS文件,而應該在main.js中通過import引用。

  每次我們修改了main.js中的代碼,都需要重新運行webpack命令進行打包,代碼才會生效。因為我們index.html中最終引用的是bundle.js文件。

  經過上面的示例,Webpack 可以做什麼事情?

  1. webpack 能夠處理 JS 文件的互相依賴關係。

  2. webpack 能夠處理JS的相容問題,把高級的、瀏覽器不識別的語法,轉為低級的,瀏覽器能正常識別的語法。

6.3 webpack-最基本的配置文件的使用

       在前面的示例中,我們發現每次都要運行webpack 要打包的文件的路徑 打包好的輸出文件的路徑 打包模式,這樣執行起來非常繁瑣。我們可以通過配置文件來讓操作變得更加簡單。

       如果不做任何配置,直接運行命令webpack,會出現如下錯誤提示:

webpack
Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

       在項目根目錄下創建一個webpack.config.js(預設,可修改)文件來配置webpack。這個配置文件,其實就是一個 JS 文件,通過 Node 中的模塊操作,向外暴露了一個配置對象,其代碼結構如下:

module.exports = {
    entry: '',               // 入口文件
    output: {},              // 出口文件
    module: {},              // 處理對應模塊
    plugins: [],             // 對應的插件
    devServer: {},           // 開發伺服器配置
    mode: 'development'      // 模式配置
}

  由於運行webpack命令的時候,webpack需要指定入口文件和輸出文件的路徑,所以,我們需要在webpack.config.js中配置這兩個路徑。根據項目的代碼結構,我們來寫一下最基本的webpack配置:

// 導入處理路徑的模塊
const path = require("path");
// 導出一個配置對象
module.exports = {
  entry: path.join(__dirname, "./src/main.js"), // 項目入口文件
  output: { // 配置輸出選項
    path: path.join(__dirname, "./dist"), // 配置輸出的路徑
    filename: "bundle.js" // 配置輸出的文件名
  },
  mode: "development" // 模式配置
};

  然後再來運行webpack,這次,我們發現運行成功了,運行結果和前面執行:webpack ./src/main.js --output-filename ./bundle.js --mode development 命令是一樣的。

  思考: 當我們在控制台,直接輸入 webpack 命令執行的時候,webpack 做了什麼?

  1. 首先,webpack 發現我們並沒有通過命令的形式,給它指定入口和出口。

  2. 於是webpack 就會去項目的根目錄中查找一個叫做 “webpack.config.js”的配置文件。

  3. 當找到配置文件後,webpack 會去解析執行這個配置文件,當解析執行完配置文件後,就得到了配置文件中,導出的配置對象。

  4. 當 webpack 拿到配置對象後,就拿到了配置對象中,指定的入口和出口,然後進行打包構建。

6.4 webpack-dev-server的基本使用

       假設我們每次修改了main.js中的代碼,我們都需要手動運行webpack打包的命令,然後去刷新瀏覽器才能看到最新的代碼效果,這樣操作起來很麻煩,我們希望有那種“熱更新”的機制,當修改代碼之後,會自動進行打包構建,然後馬上能夠在瀏覽器中看到最新的運行效果。

  所謂熱替換,就是在不刷新網頁的情況下,改變代碼後,會自動編譯並更新頁面內容。

  我們可以使用 webpack-dev-server 這個工具,來實現自動打包編譯的功能。

  安裝

  運行 npm i webpack-dev-server -D 把這個工具安裝到項目的本地開發依賴。

  安裝完成之後,直接在控制台運行:webpack-dev-server,會報錯:

  webpack-dev-server : 無法將“webpack-dev-server”項識別為 cmdlet、函數、腳本
  文件或可運行程式的名稱。請檢查名稱的拼寫,如果包括路徑,請確保路徑正確,然後再試一次。

  這是因為我們是在項目中進行本地安裝的 webpack-dev-server , 所以無法把它當作 腳本命令,在powershell 終端中直接運行(只有那些安裝到全局-g 的工具,才能在終端中正常執行)。此時我們需要藉助於package.json文件中的指令,來進行運行webpack-dev-server命令。

  修改package.json中scripts下麵的dev節點,將"webpack --mode development"修改為"webpack-dev-server"。

  "scripts": {
    "dev": "webpack-dev-server",

  註意: webpack-dev-server 這個工具,如果想要正常運行,要求在本地項目中,必須安裝 webpack。package.json屬於json文件,而json文件中是不能寫註釋的哦。

  webpack4.x將CLI抽離出為單獨的包webpack-cli,需要npm install webpack-cli -D單獨全局安裝不然無法進行編譯。

  運行命令:npm install webpack webpack-cli webpack-dev-server --save-dev 進行安裝。

  執行運行:npm run dev,運行結果如下所示:

npm run dev
> webpack-learn@1.0.0 dev D:\WorkSpace\vue_book\codes\chapter6\webpack-learn
> webpack-dev-server
i 「wds」: Project is running at http://localhost:8080/

  就可以http://localhost:8080訪問了,此時訪問webpack-dev-server啟動的http://localhost:8080/網站,發現是一個文件夾的面板,需要點擊到src目錄下,才能打開我們的index首頁,由於此時引用不到bundle.js文件,所以需要修改index.html中script的src屬性為/bundle.js。

   <script src="/bundle.js"></script>

  webpack-dev-server 幫我們打包生成的 bundle.js 文件,並沒有存放到實際的物理磁碟上;而是直接托管到了電腦的記憶體中,所以,我們在項目根目錄中,根本找不到這個打包好的 bundle.js;。webpack-dev-server 把打包好的文件,以一種虛擬的形式,托管到了咱們項目的根目錄中,雖然我們看不到它,但是可以認為, 它和 dist、src 、node_modules 平級,只是看不見,它的文件叫做 bundle.js。

  把bundle.js放在記憶體中的好處是:由於需要實時打包編譯,所以放在記憶體中速度會非常快。

  更多內容請移步至:《Vue.js 2.x實踐指南》 已出版


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在VUE+Element 前端應用中,圖標是必不可少點綴界面的元素,因此整合一些常用的圖標是非常必要的,還好Element界面組件裡面提供了很多常見的圖標,不過數量不是很多,應該是300個左右吧,因此考慮擴展更多圖標,我引入了vue-awesome組件,它利用了Font Awesome的內置圖標,實... ...
  • 具體錯誤如下圖: 這是因為在微信小程式的 app.json 文件中是不能包含有註釋的,只需要把註釋去掉就可以了。 ...
  • 面對這麼多的知識點,有的盆友就麻爪了…… 我是誰? 我該從哪裡開始看? 我該怎麼看? 我該看多少? 這,是一個問題。 我們貼心的做了一個學習線路圖: 然並卵,很多人還是一頭霧水…… 我們先對每階段課程做個簡單介紹: PC端頁面製作 學習HTML+CSS搭建網頁、PhotoShop切圖等基礎知識,屬於 ...
  • 前言現在的 Node 對於前端而言可以涵蓋各個方面,包括命令行介面、插件、依賴庫、腳手架以及 Web 服務等。本文是一篇對於 Node 使用的淺談文章,會簡單講解一些個人使用 Node 的經驗,分享的內容主要可分為三個方面: 工具篇 插件篇 服務篇 工具篇會講解使用 NPM 發佈命令行介面的簡單教程 ...
  • 前言 1.本文將從零開始手寫一份vue-next中的響應式原理,出於篇幅和理解的難易程度,我們將只實現核心的api並忽略一些邊界的功能點 本文將實現的api包括 track trigger effect reactive watch computed2.最近很多人私信我問前端問題,博客登陸的少沒及時 ...
  • multipage Github地址 github.com/qinouz/mult…基於 vue-cli4.0 構建 多頁面 模板腳手架! 啟動項目 git clone https://github.com/qinouz/multipage.git cd multipage npm install ...
  • 遇到問題 數據源有數據,但表體無法渲染出數據。 排查問題之路 其實關於layui表格無法渲染的問題之前也遇到過,我知道的情況以下幾種 數據源返回的的格式不正確 (code 必須為 0 ) 正確的返回格式:{"code":0,"msg":"","count":1000,"data":[]} 數據源正確 ...
  • 轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。 原文出處:https://dzone.com/articles/why-masses-are-not-using-latest-css-features-in-20 儘管CSS每年都會發佈全新的特性,但實際上 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...