【Webpack】

時間 2021-08-12

標籤 javascript html java node webpack es6 web npm 編程 json 欄目 JavaScript 简体版

原文原文鏈接

"本質上，Webpack是一個現代JavaScript應用程序的靜態模塊打包器(module bundler).
當Webpack處理應用程序時，他會遞歸地建立一個依賴關係圖(dependency graph)，其中包含應用程序須要的每一個模塊，而後將這些模塊打包成一個或多個包(bundle).javascript

======== 安裝Webpack =========
·
先建立一個文件夾（如：webpack-demo），進入文件夾後執行安裝命令.
安裝命令：npm install -g webpack 或者 npm install web pack --save
可簡寫爲：npm i -g webpack
·
補充：若是是Mac系統，則須要加上sudo（權限問題，包括本文中後續的全部命令），即：sudo npm install -g webpack，回車後輸入當前用戶的密碼便可.
·
安裝完成之後，咱們能夠看到，在package.json文件中，已經有Webpack了：

圖中安裝的webpack-cli工具可用於在命令行運行Webpack.html

@java

關於模塊化編程

什麼是模塊化編程？node

模塊化編程是一種軟件設計技術.webpack

在模塊化編程中，開發者將程序分解成離散紅能快，並稱之爲模塊.es6

每一個模塊具備比完整程序更小的接觸面，使得校驗、調試、測試垂手可得.
精心編寫的模塊提供了可靠的抽象和封裝界限，使得應用程序中每一個模塊都具備條理清楚的設計和明確的目的.web

下面來參考一下某項目各個組件的分佈結構：

能夠看到，不一樣的業務邏輯，不一樣點的頁面內容，應該分隔在不一樣的文件(模塊)中，這樣更加方便往後的調試與維護.npm

- - - - - - - - - - - - - - - - - - - - -
Node.js從一開始就支持模塊化編程，然而在web，模塊化的支持正緩慢到來.
在web，存在多種支持JavaScript模塊化的工具，這些工具各有優點和限制.
Webpack正是從這些工具得到的經驗和教訓，而將模塊的概念應用於項目中的任何文件.
- - - - - - - - - - - - - - - - - - - - -編程

爲何使用模塊化編程？json

模塊化編程使咱們可以把某一類功能組合成一個獨立的文件，而後對外提供一個接口，這種方式更加簡化了各個業務功能之間的協做關係，方便往後的維護和擴展.

Webpack的工做方式

Webpack會把咱們的項目當作一個總體，經過一個給定的主文件（如: index.js），Webpack將從這個給定的主文件開始找到你的項目的全部依賴文件，使用loaders處理它們。最後打包成一個或多個瀏覽器可識別的JavaScript文件.

以下圖所示：

三個重要的概念

======== 入口文件 =========
·
入口文件(entry point)指示Webpack應該使用哪一個模塊來做爲構建其內部依賴圖的開始.
進入入口起點後，Webpack會找出有哪些模塊和庫是入口起點(直接和間接)依賴的.
全部的依賴項隨即被處理，最後輸出到稱之爲bundles的文件中.

======== 出口文件 =========
·
出口文件告訴Webpack在哪裏輸出它所建立的bundles，以及如何命名這些文件，默認值爲dist.
基本上，整個應用程序結構都會被編譯到你指定的輸出路徑的文件夾中.

======== loader =========
·
loader使Webpack可以處理那些非JavaScript文件(webpack自身只理解JavaScript).
loader能夠將全部類型的文件轉換爲Webpack可以處理的有效模塊，而後咱們即可以利用Webpack的打包能力對它們進行處理.
·
本質上，loader是將全部類型的文件轉換爲應用程序的依賴圖和最終的bundle能直接引用的模塊.

使用Webpack建立一個項目

下面，咱們使用上面的目錄結構，並根據Webpack的上述幾個概念，來寫一個簡單的Demo程序.

首先，咱們在webpack-demo目錄下面建立一個src目錄——用於存放咱們程序的原始文件（如：src/index.js）.
而後，在webpack-demo目錄下面建立一個index.html文件——用於使用打包後的出口文件.

新的目錄結構以下：

準備就緒以後，咱們開始在index.html文件中寫入最基礎的html代碼：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Sample Project</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="./dist/main.js"></script>
  </body>
</html>

這些基礎代碼即是爲了引入打包後的js文件，Webpack4默認的輸出文件爲dist/main.js

而後咱們在index.js文件中寫入以下代碼：

// index.js
let greeting = "Hello Webpack!";
console.log(greeting);

最後，咱們將在下面使用Webpack將該項目打包.

正式使用Webpack

這裏咱們將使用Webpack4打包，默認下載的就是Webpack4，Webpack3已基本再也不使用了.

（補充：若是是Mac系統，則須要在命令前面加上sudo（權限問題），回車後輸入當前用戶的密碼便可.）

======== 使用Webpacck3打包 =========
·
Webpack3能夠在終端使用，基本使用方法(全局安裝)以下：
web pack {entry file} {destination for bundled file}
·
指定入口文件後，Webpack將自動識別項目所依賴的其它文件.
不過須要注意的是：若是你的Webpack不是全局安裝的，那麼當你在終端中使用此命令時，須要額外指定其在node_modules中的地址.
·
Webpack3非全局安裝的狀況下打包：
./node_modules/.bin/webpack ./src/index.js destination/bundle.js

======== 使用Webpacck4打包 =========
·
Webpack4增長了模式區分，打包命令以下：
webpack --mode development(或production) 指定模式
·
兩種模式：
development 開發者模式，打包默認不壓縮代碼.
production 生產者模式，上線時使用，會壓縮代碼，默認爲此模式.
·
Webpack4固定入口目錄爲src，入口文件必須爲index.js，打包後文件在新增的dist目錄下，出口文件爲main.js.
·
開始打包：
打包後能夠看到，新的文件結構以下：

而後咱們在瀏覽器中打開index.html文件的控制檯，能夠看到以下結果：

使用Webpack進行ES6的模塊化編程

ES6引入了模塊化編程的概念（關於ES6的新增語法，請參考此文獻：ES6新增語法詳述）.

下面，咱們繼續使用上面的demo程序來測試ES6中的模塊化編程.

1.首先，咱們在src目錄下新建一個sayhello.js問價，並加入以下代碼：

// sayhello.js

let huaqiangu = "您好，花千骨！";
let baiqian = "您好，白淺！";
let jinmi = "您好，錦覓！";

export {huaqiangu, baiqian};

export default jinmi;
// 每一個文件中只能有一個export default xx,
// import會將沒有命中的變量名映射到export default導出的數據上面

2.隨後，咱們在index.js文件中導入上面建立的sayhello.js文件：

// index.js

let greeting = "Hello Webpack!";
console.log(greeting);

// import {huaqiangu, baiqian} from "./sayhello.js";
// 可不寫文件後綴名：
import {huaqiangu, baiqian} from "./sayhello";

import jm from './sayhello';

console.log('huaxiangu:', huaqiangu);
console.log('baiqian:', baiqian);
console.log('jm:', jm);

3.最後，咱們從新打包項目，並在瀏覽器中打開index.html文件的控制檯，查看以下：

好了，咱們就學到這裏吧.

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。