可以說現(xiàn)在但凡開發(fā)Single page application，webpack是一個(gè)不可或缺的工具。
專注于為中小企業(yè)提供網(wǎng)站建設(shè)、網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)信陽免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上1000+企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
WebPack可以看做是一個(gè) 模塊加工器，如上圖所示 。它做的事情是，接受一些輸入，經(jīng)過加工產(chǎn)生一些輸出。
輸入是我們web前端項(xiàng)目的模塊文件，通常情況下這些文件都不能直接被瀏覽器的JavaScript執(zhí)行引擎所執(zhí)行。
輸出是經(jīng)過webpack加工后的能被瀏覽器使用的javascript和靜態(tài)資源文件。比如ES6的js轉(zhuǎn)成ES5的js，CSS預(yù)處理器文件轉(zhuǎn)成CSS文件等等。
我們來動(dòng)手做一個(gè)具體的例子。這個(gè)例子只花費(fèi)10分鐘時(shí)間，就能讓我們熟悉webpack的基本用法。
1. 新建一個(gè)文件夾，首先用npm init命令創(chuàng)建一個(gè)package.json:
在下面使用命令行npm install --save-dev webpack，安裝webpack并保存到項(xiàng)目的package.json的devDependencies下面。
花了一分鐘才執(zhí)行完畢。
執(zhí)行完畢后，檢查package.json, 發(fā)現(xiàn)webpack出現(xiàn)在devDependencies區(qū)域里。
此時(shí)項(xiàng)目文件夾層次結(jié)構(gòu)如下圖：
2. 新建一個(gè)index.html文件，輸入以下內(nèi)容：
從源代碼看出，這個(gè)html引用了一個(gè)webpack打包之后生成的輸出文件。
既然是模塊化開發(fā)，我們就新建一個(gè)模塊，實(shí)現(xiàn)文件放在print.js里：
重慶分公司
重慶分公司
function print(content){ window.document.getElementById("app").innerText = "Hello," + content;
}module.exports = print;
這個(gè)模塊就實(shí)現(xiàn)了一個(gè)print函數(shù)，把傳入的字符串顯示在index.html的id為app的div標(biāo)簽里。
有了module后，我們還需要執(zhí)行這個(gè)module。為此，新建一個(gè)main.js文件，輸入下列內(nèi)容：
const print = require("./print.js");
print("Jerry");
最后，我們得生成index.html使用到的bundle.js文件。為此，我們要給webpack定義一個(gè)任務(wù)，通過新建文件webpack.config.js完成。
entry字段定義了webpack的輸入：main.js, 輸出則放在當(dāng)前目錄dist下面的bundle.js里。
const path = require("path");module.exports = {entry: "./main.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./dist"),
},mode: 'development' // 設(shè)置mode};
至此，webpack_demo文件夾下的資料看起來是這樣的：
執(zhí)行命令行webpack：
執(zhí)行完webpack后，打開index.html, 看到了我們期望中的Hello Jerry:
至此，一個(gè)最簡單的webpack例子就跑通了。
要獲取更多Jerry的原創(chuàng)文章，請關(guān)注公眾號"汪子熙"
