webpack4系列教程（一）：初識webpack

TigerChain 發布于2019-08-23 14:37 / 1186人閱讀

摘要：當處理應用程序時，它會遞歸地構建一個依賴關系圖，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個。而可以將所有類型的文件處理成能夠識別的有效模塊，然后再對其進行處理。

1. 什么是webpack

先來看看官網對webpack的介紹?：

本質上，webpack是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個bundle。

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

官網首頁很清晰的展示了webpack的主要功能：

我們可以看到，一堆 modules 經過?webpack 打包處理成了各種靜態資源。這就是 webpack

2. webpack核心概念

在開始學習 webpack 之前，你需要了解 webpack 的四個核心概念：?

入口（entry）

出口（output）

loader

插件（plugins）?

?2.1 入口（entry）

入口指示 webpack 應該使用哪個模塊，來開始構建其內部依賴。進入入口后，webpack 會找出有哪些模塊和庫是與入口相依賴的。

我們可以在webpack配置中配置entry屬性，來設置一個或多個入口起點。以下是一個簡單的entry配置：

const config = {
  entry: {
    main: "path/to/your/entry/index.js"
  }
}
module.exports = config

2.2 出口（output）

?設置output是為了告訴webpack要在哪里輸出其創建的bundle，并且可以對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

我們通過 output.filename 來設置輸出bundle的文件名， output.path 來設置 bundle 的輸出路徑?

?>path 是 nodeJs 中的核心模塊，用來處理項目中的路徑。

?2.3 loader

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

loader 中有兩個重要屬性：

test屬性，用于標識出應該被對應的 loader 進行轉換的某個或某些文件，通常是一個正則表達式；

use屬性，表示進行轉換時，應該使用哪個 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

以上示例中loader的配置相當于告訴webpack在遇到 .ejs 的文件時，在打包之前先用 ejs-loader 裝換一下。

2.4 插件（plugins）

loader 被用于轉換某些類型的模塊，而插件則可以用于執行范圍更廣的任務。想要使用一個插件，你只需要require()它，然后把它添加到plugins數組中。多數插件可以通過選項(option)自定義。

const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin") // 通過 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?將為你生成一個 HTML5 文件，其中包括使用script標簽的 body 中的所有 webpack 包，webpack 提供提供了許多功能強大的插件，查閱插件列表獲取更多插件的使用方法。

GPU云服務器云服務器 webpack4教程 webpack4 webpack教程系列一

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/100883.html

webpack4系列教程（十）：總結

摘要：傳送門系列教程一初識系列教程二創建項目，打包第一個文件系列教程三自動生成項目中的文件系列教程四處理項目中的資源文件一系列教程五處理項目中的資源文件二系列教程六使用分割代碼系列教程七使用系列教程八使用審查代碼系列教程九開發環境和生產環境在前端開發日益復雜的今天，我們需要一個工具來幫助我們管理項目資源，打包、編譯、預處理、后處理等等。webpack的出現無疑是前端開發者的福音，我的博文只...

hqman 2019-08-26 13:29 評論0 收藏0
webpack-demos：全網最貼心webpack系列教程和配套代碼

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

LMou 2019-08-23 12:25 評論0 收藏0
webpack4 系列教程(一): 打包JS

摘要：本身就是為了打包所設計，作為第一節，介紹怎么打包。檢驗規范支持支持。創建文件夾，其中和分別用和規范編寫。收尾打包后的文件會按照我們的配置放在目錄下，這時，需要創建一個文件，引用打包好的文件。個人網站原文鏈接系列教程一打包 webpack 本身就是為了打包js所設計，作為第一節，介紹怎么打包js。 1. 檢驗webpack規范支持 webpack支持es6, CommonJS, AMD。...

chanthuang 2019-08-23 10:31 評論0 收藏0
webpack4 系列教程: 前言

摘要：課程地址全部課程地址立即進入課程源碼目錄截至按照知識點，目錄分成了個文件夾之后還會持續更新。個人網站原文鏈接系列教程前言本文檔已經過時，最近內容請看：https://godbmw.com/passage/76。一共16節課程和代碼。謝謝支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的幫助下，開發者可以輕松地實現加密代碼、多平臺兼容。而最重要的...

DevWiki 2019-08-23 10:25 評論0 收藏0
webpack4系列教程（二）：創建項目，打包第一個JS文件

摘要：對于大多數項目，建議本地安裝。打包第一個文件首先，我們在根目錄下創建一個文件和一個文件夾。而中的屬性，表示入口的名稱，此處就是。接下來打開文件，來編寫一條命令執行的打包。 1. 創建項目 1.1 初始化一個項目首先安裝nodejs，打開?nodeJs官網?直接下載安裝即可，安裝完畢后打開命令行工具，進入你的項目文件夾，執行 npm init 進行項目的初始化： showImg(htt...

waterc 2019-08-23 14:40 評論0 收藏0