可以說現在但凡開發Single page application，webpack是一個不可或缺的工具。

Webpack 10分鐘入門

WebPack可以看做是一個模組加工器，如上圖所示。它做的事情是，接受一些輸入，經過加工產生一些輸出。

輸入是我們web前端專案的模組檔案，通常情況下這些檔案都不能直接被瀏覽器的JavaScript執行引擎所執行。

輸出是經過webpack加工後的能被瀏覽器使用的javascript和靜態資原始檔。比如ES6的js轉成ES5的js，CSS前處理器檔案轉成CSS檔案等等。

我們來動手做一個具體的例子。這個例子只花費10分鐘時間，就能讓我們熟悉webpack的基本用法。

1. 新建一個資料夾，首先用npm init命令建立一個package.json:

Webpack 10分鐘入門

在下面使用命令列npm install --save-dev webpack，安裝webpack並儲存到專案的package.json的devDependencies下面。

花了一分鐘才執行完畢。

Webpack 10分鐘入門

執行完畢後，檢查package.json, 發現webpack出現在devDependencies區域裡。

Webpack 10分鐘入門

此時專案資料夾層次結構如下圖：

Webpack 10分鐘入門

2. 新建一個index.html檔案，輸入以下內容：

<html><div id="app"></div><script src="./dist/bundle.js"></script></html>

從原始碼看出，這個html引用了一個webpack打包之後生成的輸出檔案。

既然是模組化開發，我們就新建一個模組，實現檔案放在print.js裡：

function print(content){    window.document.getElementById("app").innerText = "Hello," + content;
}module.exports = print;

這個模組就實現了一個print函式，把傳入的字串顯示在index.html的id為app的div標籤裡。

有了module後，我們還需要執行這個module。為此，新建一個main.js檔案，輸入下列內容：

const print = require("./print.js");
print("Jerry");

最後，我們得生成index.html使用到的bundle.js檔案。為此，我們要給webpack定義一個任務，透過新建檔案webpack.config.js完成。

entry欄位定義了webpack的輸入：main.js, 輸出則放在當前目錄dist下面的bundle.js裡。

const path = require("path");module.exports = {entry: "./main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./dist"),
},mode: 'development' // 設定mode};

至此，webpack_demo資料夾下的資料看起來是這樣的：

Webpack 10分鐘入門

執行命令列webpack：

Webpack 10分鐘入門

執行完webpack後，開啟index.html, 看到了我們期望中的Hello Jerry:

Webpack 10分鐘入門

至此，一個最簡單的webpack例子就跑通了。

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙"

Webpack 10分鐘入門

相關文章