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

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

0.1、安裝webpack

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

npm install webpack -g

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

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

webpack -v

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

執(zhí)行命令：

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

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

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

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

示例目錄

文件目錄見1、最簡單的webpack實(shí)例這個目錄。

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

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

D:\study notes\Project\webpack_learner\1、最簡單的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)容略。這個時(shí)候打開html文件，查看控制臺，會發(fā)現(xiàn)正常輸出了bar。