vue學習之webpack

時間 2019-12-13

標籤 vue 學習 webpack 简体版

原文原文鏈接

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

什麼是模塊化編程

模塊化編程是一種軟件設計技術。前端

在模塊化編程中，開發者將程序分解成離散功能塊，並稱之爲模塊。node

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

下面參考一下路飛前端項目各個組件的分佈結構：git

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

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

爲何使用模塊化編程

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

Webpack的工做方式

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

安裝Webpack

1
2
3

npm install -g webpack
或者
npm install webpack --save

此時咱們能夠看到，在package.json文件中，已經有Webpack了：json

Webpack-cli工具用於在命令行中運行Webpack.

幾個重要概念

入口文件

入口起點(entry point)指示 Webpack 應該使用哪一個模塊，來做爲構建其內部依賴圖的開始。進入入口起點後，Webpack 會找出有哪些模塊和庫是入口起點（直接和間接）依賴的。

每一個依賴項隨即被處理，最後輸出到稱之爲 bundles 的文件中。

出口文件

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

loader

loader讓 webpack 可以去處理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 能夠將全部類型的文件轉換爲 webpack 可以處理的有效模塊，而後你就能夠利用 webpack 的打包能力，對它們進行處理。

本質上，webpack loader 將全部類型的文件，轉換爲應用程序的依賴圖（和最終的 bundle）能夠直接引用的模塊。

Demo

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

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

咱們在index.html文件中寫入最基礎的html代碼，它在這裏目的在於引入打包後的js文件，Webpack4默認的輸出文件爲dist/main.js。

<!-- 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>

而後在index.js中寫入以下代碼：

// index.js
let greeting = "Hello Webpack!";

console.log(greeting);

最後，使用Webpack將該項目打包。

正式使用Webpack

Webpack3打包

Webpack3能夠在終端中使用，在基本的使用方法以下：

1	webpack {entry file} {destination for bundled file}

指定入口文件後，Webpack將自動識別項目所依賴的其它文件，不過須要注意的是若是你的Webpack不是全局安裝的，那麼當你在終端中使用此命令時，須要額外指定其在node_modules中的地址，繼續上面的例子，在終端中輸入以下命令:

webpack3非全局安裝的狀況下打包

1	./node_modules/.bin/webpack ./src/index.js destination/bundle.js

webpack3全局安裝的狀況下打包

1	webpack ./src/index.js destination/bundle.js

Webpack4打包

Webpack4增長了模式區分

1
2
3

webpack --mode development/production 進行模式切換
 development 開發者模式 打包默認不壓縮代碼
 production 生產者模式 上線時使用，壓縮代碼。 默認是這個模式

Webpack4固定入口目錄爲src，入口文件必須爲index.js，打包後文件在新增的dist目錄下, 出口文件爲main.js，開始打包。

新的文件結構以下：

而後咱們打開index.html文件的控制檯, 能夠看到以下結果：

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

在介紹ES6經常使用語法時，咱們介紹過，ES6引入了模塊化編程的概念，下面，咱們繼續使用上面的demo程序來測試ES6中的模塊化編程。

在src目錄下面新建一個sayhello.js文件，並加入以下代碼：

// sayhello.js

let alex = "Hello Alex";
let peiqi = "Hello Peiqi";

let pizza = "Hello Pizza";

export {alex, peiqi};

export default pizza;

隨後在index.js中import：

// index.js
let greeting = "Hello Webpack!";

console.log(greeting);

import {alex, peiqi} from "./sayhello.js";

import shuaige from "./sayhello.js";

console.log("alex: ", alex);
console.log("peiqi: ", peiqi);
console.log("shuaige: ", shuaige);