溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
可以說現在但凡開發Single page application，webpack是一個不可或缺的工具。
WebPack可以看做是一個 模塊加工器，如上圖所示 。它做的事情是，接受一些輸入，經過加工產生一些輸出。
輸入是我們web前端項目的模塊文件，通常情況下這些文件都不能直接被瀏覽器的JavaScript執行引擎所執行。
輸出是經過webpack加工后的能被瀏覽器使用的javascript和靜態資源文件。比如ES6的js轉成ES5的js，CSS預處理器文件轉成CSS文件等等。
我們來動手做一個具體的例子。這個例子只花費10分鐘時間，就能讓我們熟悉webpack的基本用法。
1. 新建一個文件夾，首先用npm init命令創建一個package.json:
在下面使用命令行npm install --save-dev webpack，安裝webpack并保存到項目的package.json的devDependencies下面。
花了一分鐘才執行完畢。
執行完畢后，檢查package.json, 發現webpack出現在devDependencies區域里。
此時項目文件夾層次結構如下圖：
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：
執行完webpack后，打開index.html, 看到了我們期望中的Hello Jerry:
至此，一個最簡單的webpack例子就跑通了。
要獲取更多Jerry的原創文章，請關注公眾號"汪子熙"
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
