Webpack基本功能理解以及使用

KnewOne 發布于2019-08-26 10:09 / 1904人閱讀

摘要：在這個過程中，會用到一些解析工具用來預處理一些模塊以及拓展語言例如這些工具的配置使用都是在中完成的。屬性，表示進行轉換時，應該使用哪個。插件接口功能極其強大，可以用來處理各種各樣的任務。

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

什么是webpack以及webpack的作用（解決什么問題）

如今web前端的業務功能越來越復雜，實現方式也越來越豐富，在web頁面開發過程中我們通常會引用很多第三方模塊以及一些拓展語言（stylus，Scss， JSX...）來簡化開發難度，而這些第三方模塊和一些拓展語言瀏覽器不能直接識別，所以要通過經過打包過程生成可以讓瀏覽器識別的格式。

就像一幢居民樓，要建起這樣一座居民樓，最基本的材料是磚、瓦、鋼筋、混凝土。而要組合這些材料形成一幢建筑，肯定是有一定的方法流程以及工具的，比如第一步先搭建地基，后面用塔吊不斷的在地基上疊加完善就形成了一幢建筑。在這個過程中，用到的方法流程以及工具起到的作用就類似于webpack。

進入正題，webpack其實就是一個JavaScript模塊集成工具，同時具有壓縮文件以及優化文件結構的作用。經過webpack打包生成的bundle包，可被瀏覽器識別解析。

在這個過程中，會用到一些loaders解析工具用來預處理一些模塊以及拓展語言（例如：stylus、Scss...）,這些工具的配置使用都是在webpack中完成的。其中常用的loaders工具有：style-loader、 css-loader、 stylus-loader。

webpack實現原理（怎么做的）

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

一切皆模塊 webpack會將源程序按照程序結構分割成一個個獨立的小模塊，當需要這些小模塊時，進行組合重構，避免冗余，達到重復利用。

按需加載 傳統的打包工具是將所有模塊編譯生成一個龐大的bundle.js文件，這樣形成的打包文件體積過于龐大，而webpack通過異步加載可以實現按需加載，減小了打包后的體積。

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

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

1. 入口(entry)

webpack要實現打包，首先我們得指定它的入口，指定入口后，webpack才會找出那些模塊和庫是入口起點（直接和間接）的依賴。
接下來我們來看一個最簡單的entry的配置例子。

webpack.base.config.js

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

2. 出口(output)

出口即配置打包后的輸出文件路徑，以及如何命名這些文件，默認值為 ./dist。基本上，整個應用程序結構，都會被編譯到你指定的輸出路徑的文件夾中。你可以通過在配置中指定一個 output 字段，來配置這些處理過程：

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能夠將非JavaScript文件轉化為webpack識別的JavaScript文件，比如講圖片轉化為JavaScript可調用的格式，或者將一些擴展語言文件轉化為瀏覽器可識別的文件格式。
本質上，webpack loader 將所有類型的文件，轉換為應用程序的依賴圖（和最終的 bundle）可以直接引用的模塊。
在更高層面，在 webpack 的配置中 loader 有兩個目標：

test 屬性，用于標識出應該被對應的 loader 進行轉換的某個或某些文件。

use 屬性，表示進行轉換時，應該使用哪個 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 被用于轉換某些類型的模塊，而插件則可以用于執行范圍更廣的任務。插件的范圍包括，從打包優化和壓縮，一直到重新定義環境中的變量。插件接口功能極其強大，可以用來處理各種各樣的任務。

想要使用一個插件，你只需要 require() 它，然后把它添加到 plugins 數組中。多數插件可以通過選項(option)自定義。你也可以在一個配置文件中因為不同目的而多次使用同一個插件，這時需要通過使用 new 操作符來創建它的一個實例。

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin"); // 通過 npm 安裝
const webpack = require("webpack"); // 用于訪問內置插件

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

module.exports = config;

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

本文基于自己學習網絡中的webpack整理的一份基本概念文檔，是自己對于webpack使用的理解總結，如有問題，煩請評論指正，共同學習，共同進步。

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

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

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

webpack的學習之路~~第一天

摘要：第節認識的作用學習的一原因現在的前端網頁功能豐富，特別是單頁應用技術流行后，的復雜度增加和需要一大堆依賴包，還需要解決，新增樣式的擴展寫法的編譯工作。在出現后，還肩負起了優化項目的責任。其實就是獲取了項目的絕對路徑。第01節：認識WebPack的作用：學習的一原因：現在的前端網頁功能豐富，特別是SPA（single page web application 單頁應用）技術流行后，...

blankyao 2019-08-22 17:03 評論0 收藏0
webpack4.x升級摘要

摘要：以為例，編寫來幫助我們完成重復的工作編譯壓縮我只要執行一下就可以檢測到文件的變化，然后為你執行一系列的自動化操作，同樣的操作也發生在這些的預處理器上。的使用是針對第三方類庫使用各種模塊化寫法以及語法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的發展很久以前，互聯網行業有個職位叫做軟件開發工程師在那個時代，大家可能...

levinit 2019-08-23 18:11 評論0 收藏0
工作流程以及webpack配置一些優化以及經驗教訓

摘要：今天順便總結了下之前的一些經驗，希望對大家的工作或者學習有一些幫助。老生常談的啥的就不多說了，簡單分享些插件和配置功能優化，方便大家更省力地寫代碼。另外，的正規操作常用于服務端項目的發布，增加了不少靈活性，一下子解放了運維大哥。前端工程化這些事情現在已經算是深入人心了，即便不清楚具體含義vue-cli creat-react-app之類的腳手架也幫助大家快速開發了不少項目。今天順便...

Edison 2019-08-23 12:35 評論0 收藏0
JavaScript - 收藏集 - 掘金

摘要：插件開發前端掘金作者原文地址譯者插件是為應用添加全局功能的一種強大而且簡單的方式。提供了與使用掌控異步前端掘金教你使用在行代碼內優雅的實現文件分片斷點續傳。 Vue.js 插件開發 - 前端 - 掘金作者：Joshua Bemenderfer原文地址: creating-custom-plugins譯者：jeneser Vue.js插件是為應用添加全局功能的一種強大而且簡單的方式。插....

izhuhaodev 2019-08-21 11:44 評論0 收藏0
前端學習路線

摘要：具體來說，包管理器就是可以通過命令行，幫助你把外部庫和插件放到你的項目里面并在之后進行版本升級，這樣就不用手工復制和更新庫?，F在有的包管理器主要是和。一、基礎 1、學習HTML基礎 HTML給你的網頁賦予了結構。它就像是人的骨架那樣讓你保持站立。首先你需要去學習語法以及它必須提供的一切。你的學習應該聚焦在下面這些東西上：學習HTML基礎，了解如何編寫語義HTML 理解如何把網頁分...

FullStackDeveloper 2019-08-22 16:48 評論0 收藏0