Webpack基本功能理解以及使用

KnewOne 發(fā)布于2019-08-26 10:09 / 1968人閱讀

摘要：在這個(gè)過(guò)程中，會(huì)用到一些解析工具用來(lái)預(yù)處理一些模塊以及拓展語(yǔ)言例如這些工具的配置使用都是在中完成的。屬性，表示進(jìn)行轉(zhuǎn)換時(shí)，應(yīng)該使用哪個(gè)。插件接口功能極其強(qiáng)大，可以用來(lái)處理各種各樣的任務(wù)。

對(duì)于前端工程化，webpack一個(gè)神奇的工具，既然是個(gè)神奇的工具。那我們保留我們的好奇心，來(lái)聊一聊它，首先我們要搞清楚webpack到底是用來(lái)解決什么問(wèn)題的，然后我們來(lái)看看它到底是怎么做的，最后來(lái)看看它的一些基本用法，下面就來(lái)侃一侃。

什么是webpack以及webpack的作用（解決什么問(wèn)題）

如今web前端的業(yè)務(wù)功能越來(lái)越復(fù)雜，實(shí)現(xiàn)方式也越來(lái)越豐富，在web頁(yè)面開(kāi)發(fā)過(guò)程中我們通常會(huì)引用很多第三方模塊以及一些拓展語(yǔ)言（stylus，Scss， JSX...）來(lái)簡(jiǎn)化開(kāi)發(fā)難度，而這些第三方模塊和一些拓展語(yǔ)言瀏覽器不能直接識(shí)別，所以要通過(guò)經(jīng)過(guò)打包過(guò)程生成可以讓瀏覽器識(shí)別的格式。   就像一幢居民樓，要建起這樣一座居民樓，最基本的材料是磚、瓦、鋼筋、混凝土。而要組合這些材料形成一幢建筑，肯定是有一定的方法流程以及工具的，比如第一步先搭建地基，后面用塔吊不斷的在地基上疊加完善就形成了一幢建筑。在這個(gè)過(guò)程中，用到的方法流程以及工具起到的作用就類(lèi)似于webpack。
進(jìn)入正題，webpack其實(shí)就是一個(gè)JavaScript模塊集成工具，同時(shí)具有壓縮文件以及優(yōu)化文件結(jié)構(gòu)的作用。經(jīng)過(guò)webpack打包生成的bundle包，可被瀏覽器識(shí)別解析。
在這個(gè)過(guò)程中，會(huì)用到一些loaders解析工具用來(lái)預(yù)處理一些模塊以及拓展語(yǔ)言（例如：stylus、Scss...）,這些工具的配置使用都是在webpack中完成的。其中常用的loaders工具有：style-loader、 css-loader、 stylus-loader。

webpack實(shí)現(xiàn)原理（怎么做的）

原理的理解可以參照上圖。
webpack的最核心的原理： 1、一切皆模塊 2、按需加載。

一切皆模塊 webpack會(huì)將源程序按照程序結(jié)構(gòu)分割成一個(gè)個(gè)獨(dú)立的小模塊，當(dāng)需要這些小模塊時(shí)，進(jìn)行組合重構(gòu)，避免冗余，達(dá)到重復(fù)利用。

按需加載 傳統(tǒng)的打包工具是將所有模塊編譯生成一個(gè)龐大的bundle.js文件，這樣形成的打包文件體積過(guò)于龐大，而webpack通過(guò)異步加載可以實(shí)現(xiàn)按需加載，減小了打包后的體積。

webpack的使用方法（怎么用它）

在使用webpack之前首先要理解四個(gè)基本概念：

1. 入口(entry)

webpack要實(shí)現(xiàn)打包，首先我們得指定它的入口，指定入口后，webpack才會(huì)找出那些模塊和庫(kù)是入口起點(diǎn)（直接和間接）的依賴(lài)。
接下來(lái)我們來(lái)看一個(gè)最簡(jiǎn)單的entry的配置例子。

webpack.base.config.js

module.exports = {
  entry: "./src/main.js"
};

2. 出口(output)

出口即配置打包后的輸出文件路徑，以及如何命名這些文件，默認(rèn)值為 ./dist?；旧希麄€(gè)應(yīng)用程序結(jié)構(gòu)，都會(huì)被編譯到你指定的輸出路徑的文件夾中。你可以通過(guò)在配置中指定一個(gè) output 字段，來(lái)配置這些處理過(guò)程：

webpack.base.config.js

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),  // 輸出路徑
    filename: "output.bundle.js"  // 輸出文件名
  }
};

3. loader

loader能夠?qū)⒎荍avaScript文件轉(zhuǎn)化為webpack識(shí)別的JavaScript文件，比如講圖片轉(zhuǎn)化為JavaScript可調(diào)用的格式，或者將一些擴(kuò)展語(yǔ)言文件轉(zhuǎn)化為瀏覽器可識(shí)別的文件格式。
本質(zhì)上，webpack loader 將所有類(lèi)型的文件，轉(zhuǎn)換為應(yīng)用程序的依賴(lài)圖（和最終的 bundle）可以直接引用的模塊。
在更高層面，在 webpack 的配置中 loader 有兩個(gè)目標(biāo)：

test 屬性，用于標(biāo)識(shí)出應(yīng)該被對(duì)應(yīng)的 loader 進(jìn)行轉(zhuǎn)換的某個(gè)或某些文件。

use 屬性，表示進(jìn)行轉(zhuǎn)換時(shí)，應(yīng)該使用哪個(gè) loader。

webpack.config.js

const path = require("path");

const config = {
  output: {
    filename: "my-first-webpack.bundle.js"
  },
  module: {
    rules: [
      { test: /.txt$/, use: "raw-loader" }
    ]
  }
};

module.exports = config;

4. 插件(plugins)

loader 被用于轉(zhuǎn)換某些類(lèi)型的模塊，而插件則可以用于執(zhí)行范圍更廣的任務(wù)。插件的范圍包括，從打包優(yōu)化和壓縮，一直到重新定義環(huán)境中的變量。插件接口功能極其強(qiáng)大，可以用來(lái)處理各種各樣的任務(wù)。

想要使用一個(gè)插件，你只需要 require() 它，然后把它添加到 plugins 數(shù)組中。多數(shù)插件可以通過(guò)選項(xiàng)(option)自定義。你也可以在一個(gè)配置文件中因?yàn)椴煌康亩啻问褂猛粋€(gè)插件，這時(shí)需要通過(guò)使用 new 操作符來(lái)創(chuàng)建它的一個(gè)實(shí)例。

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin"); // 通過(guò) npm 安裝
const webpack = require("webpack"); // 用于訪(fǎng)問(wèn)內(nèi)置插件

const config = {
  module: {
    rules: [
      { test: /.txt$/, use: "raw-loader" }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: "./src/index.html"})
  ]
};

module.exports = config;

其他一些詳細(xì)用法可以參考webpack官方文檔。 參考： webpack中文文檔

本文基于自己學(xué)習(xí)網(wǎng)絡(luò)中的webpack整理的一份基本概念文檔，是自己對(duì)于webpack使用的理解總結(jié)，如有問(wèn)題，煩請(qǐng)?jiān)u論指正，共同學(xué)習(xí)，共同進(jìn)步。

云服務(wù)器 GPU云服務(wù)器 webpack使用亞馬遜云服務(wù)器租用以及使用 webpack 使用公用cdn 基本功能

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/105680.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

KnewOne

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【黑五】UltraVPS.eu：洛杉磯、英國(guó)、荷蘭、德國(guó)、立陶宛等特價(jià)KVM VPS

閱讀 2297·2021-11-24 11:15
CDN是什么？為何要用CDN加速網(wǎng)站？

閱讀 3182·2021-11-24 10:46
Furion分表分庫(kù)我也要happy coding

閱讀 1479·2021-11-24 09:39
raksmart，圣何塞獨(dú)立服務(wù)器測(cè)評(píng)，帶你了解下這個(gè)服務(wù)器怎么樣

閱讀 3986·2021-08-18 10:21
文本兩端對(duì)齊

閱讀 1536·2019-08-30 15:53
簡(jiǎn)單好用的CSS命名規(guī)范和JS代碼風(fēng)格

閱讀 1458·2019-08-30 11:19
重學(xué)前端學(xué)習(xí)筆記（四）--div和span不是夠用嗎？

閱讀 3387·2019-08-29 18:42
CSS中clip-path屬性的使用

閱讀 2421·2019-08-29 16:58

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Webpack基本功能理解以及使用

相關(guān)文章

webpack的學(xué)習(xí)之路~~第一天

webpack4.x升級(jí)摘要

**工作流程以及webpack配置一些優(yōu)化以及經(jīng)驗(yàn)教訓(xùn)**

JavaScript - 收藏集 - 掘金

前端學(xué)習(xí)路線(xiàn)

發(fā)表評(píng)論

0條評(píng)論

KnewOne

男|高級(jí)講師

TA的文章

【黑五】UltraVPS.eu：洛杉磯、英國(guó)、荷蘭、德國(guó)、立陶宛等特價(jià)KVM VPS

CDN是什么？為何要用CDN加速網(wǎng)站？

Furion分表分庫(kù)我也要happy coding

raksmart，圣何塞獨(dú)立服務(wù)器測(cè)評(píng)，帶你了解下這個(gè)服務(wù)器怎么樣

文本兩端對(duì)齊

簡(jiǎn)單好用的CSS命名規(guī)范和JS代碼風(fēng)格

重學(xué)前端學(xué)習(xí)筆記（四）--div和span不是夠用嗎？

CSS中clip-path屬性的使用

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

Webpack基本功能理解以及使用

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！