每個(gè)DEMO以文件夾為單位，從入門(mén)到進(jìn)階，根據(jù)文件夾編號(hào)為準(zhǔn)，逐步遞進(jìn)。

成文時(shí)，webpack版本是【3.8.1】

0.1、安裝webpack

首先你需要安裝Node.js，點(diǎn)擊打開(kāi)Node.js下載頁(yè)面。安裝完Node.js后，會(huì)自帶npm包管理器。

npm install webpack -g

這個(gè)命令將安裝最新版本的webpack（全局，學(xué)習(xí)教程中推薦，避免多次安裝。但實(shí)踐中還是有必要一個(gè)項(xiàng)目一個(gè)webpack，避免版本沖突帶來(lái)的bug）

目前版本是3.8.1（2017/11/27）

webpack -v

查看當(dāng)前webpack版本

執(zhí)行命令：

以下執(zhí)行webpack命令時(shí)，指在對(duì)應(yīng)文件夾下，通過(guò)控制臺(tái)執(zhí)行命令。

快速抵達(dá)對(duì)應(yīng)目錄的控制臺(tái)（win）：

在對(duì)應(yīng)目錄下，按住 shift，然后點(diǎn)擊鼠標(biāo)右鍵，在彈窗里選擇在此處打開(kāi)命令窗口即可啟用

1、webpack基本結(jié)構(gòu)

示例目錄

文件目錄見(jiàn)1、最簡(jiǎn)單的webpack實(shí)例這個(gè)目錄。

// webpack.config.js 這個(gè)是webpack的管理配置文件// 以CMD的格式導(dǎo)出模塊module.exports = {// 入口文件，指向app.jsentry:'./app.js',// 出口文件output: {// 文件名，將打包好的導(dǎo)出為bundle.jsfilename:'./bundle.js'} }// app.js 這個(gè)是入口文件import bar from'./bar'bar()// bar.js 這個(gè)是入口文件引入的模塊exportdefaultfunctionbar(){console.log('bar') }// page.html 這個(gè)是html目錄文件，這個(gè)文件引入入口文件

控制臺(tái)執(zhí)行webpack（或者 webpack --config webpack.config.js ），會(huì)顯示如下內(nèi)容：

D:\study notes\Project\webpack_learner\1、最簡(jiǎn)單的webpack實(shí)例>webpackHash:2fdcc03878d7c5480ce6Version:webpack3.8.1Time:58ms Asset Size Chunks Chunk Names ./bundle.js3.13kB0[emitted] main [0] ./app.js115bytes {0} [built] [1] ./bar.js142bytes {0} [built]

打完后的bundle.js文件內(nèi)容略。這個(gè)時(shí)候打開(kāi)html文件，查看控制臺(tái)，會(huì)發(fā)現(xiàn)正常輸出了bar。