最簡單的webpack實例

每個DEMO以文件夾為單位，從入門到進階，根據文件夾編號為準，逐步遞進。

成文時，webpack版本是【3.8.1】

0.1、安裝webpack

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

npm install webpack -g

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

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

webpack -v

查看當前webpack版本

執行命令：

以下執行webpack命令時，指在對應文件夾下，通過控制臺執行命令。

快速抵達對應目錄的控制臺（win）：

在對應目錄下，按住 shift，然后點擊鼠標右鍵，在彈窗里選擇在此處打開命令窗口即可啟用

1、webpack基本結構

示例目錄

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

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

控制臺執行webpack（或者 webpack --config webpack.config.js ），會顯示如下內容：

D:\study notes\Project\webpack_learner\1、最簡單的webpack實例>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文件內容略。這個時候打開html文件，查看控制臺，會發現正常輸出了bar。