成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

webpack4系列教程（一）：初識(shí)webpack

TigerChain / 1192人閱讀

摘要：當(dāng)處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴(lài)關(guān)系圖，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè)。而可以將所有類(lèi)型的文件處理成能夠識(shí)別的有效模塊，然后再對(duì)其進(jìn)行處理。

1. 什么是webpack

先來(lái)看看官網(wǎng)對(duì)webpack的介紹?：

本質(zhì)上，webpack是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí)，它會(huì)遞歸地構(gòu)建一個(gè)依賴(lài)關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè)bundle。

簡(jiǎn)單來(lái)說(shuō)webpack就是一個(gè)JavaScript的打包器，將各種模塊（module）打包成資源文件；還可以通過(guò) Code Spliting 來(lái)把代碼分離到不同的 bundle 中，然后可以按需加載或并行加載這些文件；webpack 可以使用 loader?來(lái)預(yù)處理文件，這允許你打包除了JavaScript 之外的任何靜態(tài)資源。

官網(wǎng)首頁(yè)很清晰的展示了webpack的主要功能：

?

我們可以看到，一堆 modules 經(jīng)過(guò)?webpack 打包處理成了各種靜態(tài)資源。這就是 webpack

2. webpack核心概念

在開(kāi)始學(xué)習(xí) webpack 之前，你需要了解 webpack 的四個(gè)核心概念：?

入口（entry）

出口（output）

loader

插件（plugins）?

?2.1 入口（entry）

入口指示 webpack 應(yīng)該使用哪個(gè)模塊，來(lái)開(kāi)始構(gòu)建其內(nèi)部依賴(lài)。進(jìn)入入口后，webpack 會(huì)找出有哪些模塊和庫(kù)是與入口相依賴(lài)的。

我們可以在webpack配置中配置entry屬性，來(lái)設(shè)置一個(gè)或多個(gè)入口起點(diǎn)。以下是一個(gè)簡(jiǎn)單的entry配置：

const config = {
  entry: {
    main: "path/to/your/entry/index.js"
  }
}
module.exports = config
2.2 出口（output）

?設(shè)置output是為了告訴webpack要在哪里輸出其創(chuàng)建的bundle，并且可以對(duì)bundle命名。示例：

const path = require("path")
const config = {
  entry: {
    main: "path/to/your/entry/index.js"
  }，? 
  output: {
    filename:"[name].bundle.js",
    path: path.join(__dirname,"./dist")? 
  }
}
module.exports = config

我們通過(guò) output.filename 來(lái)設(shè)置輸出bundle的文件名， output.path 來(lái)設(shè)置 bundle 的輸出路徑?

?>path 是 nodeJs 中的核心模塊，用來(lái)處理項(xiàng)目中的路徑。

?2.3 loader

由于 webpack 只認(rèn)識(shí) JavaScript 代碼，因此就需要借助其他方法來(lái)處理那些非 JavaScript 文件，如 css、image、font等。而 loader 可以將所有類(lèi)型的文件處理成 webpack 能夠識(shí)別的有效模塊，然后再對(duì)其進(jìn)行處理。

loader 中有兩個(gè)重要屬性：

test屬性，用于標(biāo)識(shí)出應(yīng)該被對(duì)應(yīng)的 loader 進(jìn)行轉(zhuǎn)換的某個(gè)或某些文件，通常是一個(gè)正則表達(dá)式；

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

const path = require("path")
 
const config = {
  entry: {
    main: "path/to/your/entry/index.js"
  }，
  output: {
    filename: "[name].bundle.js",
    path: path.join(__dirname, "./dist")
  },
  module: {
    loaders: [
      {
        test: /.ejs$/,
        use: ["ejs-loader"]
      }
    ]
  }
}
 
module.exports = config

以上示例中l(wèi)oader的配置相當(dāng)于告訴webpack在遇到 .ejs 的文件時(shí)，在打包之前先用 ejs-loader 裝換一下。

2.4 插件（plugins）

loader 被用于轉(zhuǎn)換某些類(lèi)型的模塊，而插件則可以用于執(zhí)行范圍更廣的任務(wù)。想要使用一個(gè)插件，你只需要require()它，然后把它添加到plugins數(shù)組中。多數(shù)插件可以通過(guò)選項(xiàng)(option)自定義。

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin") // 通過(guò) npm 安裝
 
const config = {
  entry: {
    main: "path/to/your/entry/index.js"
  }，
  output: {
    filename: "[name].bundle.js",
    path: path.join(__dirname, "./dist")
  },
  module: {
    loaders: [
      {
        test: /.ejs$/,
        use: ["ejs-loader"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "webpack demo",
      template: path.join(__dirname, "./index.html")
    })
  ]
}
 
module.exports = config

HtmlWebpackPlugin?將為你生成一個(gè) HTML5 文件， 其中包括使用script標(biāo)簽的 body 中的所有 webpack 包，webpack 提供提供了許多功能強(qiáng)大的插件，查閱插件列表獲取更多插件的使用方法。

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

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

相關(guān)文章

  • webpack4系列教程（十）：總結(jié)

    摘要：傳送門(mén)系列教程一初識(shí)系列教程二創(chuàng)建項(xiàng)目，打包第一個(gè)文件系列教程三自動(dòng)生成項(xiàng)目中的文件系列教程四處理項(xiàng)目中的資源文件一系列教程五處理項(xiàng)目中的資源文件二系列教程六使用分割代碼系列教程七使用系列教程八使用審查代碼系列教程九開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境 在前端開(kāi)發(fā)日益復(fù)雜的今天，我們需要一個(gè)工具來(lái)幫助我們管理項(xiàng)目資源，打包、編譯、預(yù)處理、后處理等等。webpack的出現(xiàn)無(wú)疑是前端開(kāi)發(fā)者的福音，我的博文只...

    hqman 評(píng)論0 收藏0

  • webpack-demos：全網(wǎng)最貼心webpack系列教程和配套代碼

    摘要：全網(wǎng)最貼心系列教程和配套代碼歡迎關(guān)注個(gè)人技術(shù)博客。所以我花費(fèi)了個(gè)多月整理了這份教程，一共分成節(jié)，每節(jié)都有講解，并且準(zhǔn)備了配套代碼。奈何深感水平不夠，只有一腔熱情，所以直接開(kāi)放了教程和源碼。 webpack-demos：全網(wǎng)最貼心 webpack 系列教程和配套代碼 歡迎關(guān)注個(gè)人技術(shù)博客：godbmw.com。每周 1 篇原創(chuàng)技術(shù)分享！開(kāi)源教程(webpack、設(shè)計(jì)模式）、面試刷題（偏前...

    LMou 評(píng)論0 收藏0

  • webpack4 系列教程(一): 打包JS

    摘要：本身就是為了打包所設(shè)計(jì)，作為第一節(jié)，介紹怎么打包。檢驗(yàn)規(guī)范支持支持。創(chuàng)建文件夾，其中和分別用和規(guī)范編寫(xiě)。收尾打包后的文件會(huì)按照我們的配置放在目錄下，這時(shí)，需要?jiǎng)?chuàng)建一個(gè)文件，引用打包好的文件。個(gè)人網(wǎng)站原文鏈接系列教程一打包 webpack 本身就是為了打包js所設(shè)計(jì)，作為第一節(jié)，介紹怎么打包js。 1. 檢驗(yàn)webpack規(guī)范支持 webpack支持es6, CommonJS, AMD。...

    chanthuang 評(píng)論0 收藏0

  • webpack4 系列教程: 前言

    摘要：課程地址全部課程地址立即進(jìn)入課程源碼目錄截至按照知識(shí)點(diǎn)，目錄分成了個(gè)文件夾之后還會(huì)持續(xù)更新。個(gè)人網(wǎng)站原文鏈接系列教程前言 本文檔已經(jīng)過(guò)時(shí)，最近內(nèi)容請(qǐng)看：https://godbmw.com/passage/76。一共16節(jié)課程和代碼。謝謝支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的幫助下，開(kāi)發(fā)者可以輕松地實(shí)現(xiàn)加密代碼、多平臺(tái)兼容。而最重要的...

    DevWiki 評(píng)論0 收藏0

  • webpack4系列教程（二）：創(chuàng)建項(xiàng)目，打包第一個(gè)JS文件

    摘要：對(duì)于大多數(shù)項(xiàng)目，建議本地安裝。打包第一個(gè)文件首先，我們?cè)诟夸浵聞?chuàng)建一個(gè)文件和一個(gè)文件夾。而中的屬性，表示入口的名稱(chēng)，此處就是。接下來(lái)打開(kāi)文件，來(lái)編寫(xiě)一條命令執(zhí)行的打包。 1. 創(chuàng)建項(xiàng)目 1.1 初始化一個(gè)項(xiàng)目 首先安裝nodejs，打開(kāi)?nodeJs官網(wǎng)?直接下載安裝即可，安裝完畢后打開(kāi)命令行工具，進(jìn)入你的項(xiàng)目文件夾，執(zhí)行 npm init 進(jìn)行項(xiàng)目的初始化： showImg(htt...

    waterc 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<