webpack4-01:概念與零配置Hello World
本人才疏學淺，如有描述不對，或者理解錯誤的地方歡迎指出。會及時改正！
此教程基於windows 64位作業系統
- Nodejs 版本：v10.15.1
- npm : 6.4.1
- webpack : 4.30.0
概念
本質上，webpack 是一個現代 JavaScript 應用程式的靜態模組打包器(module bundler)。當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle。
從 webpack v4.0.0 開始，可以不用引入一個配置檔案也能完成簡陋的打包效果。
在開始之前，請確保安裝了Node.js的最新版本。使用 Node.js 最新的長期支援版本(LTS - Long Term Support)，理想的起步。使用舊版本，你可能遇到各種問題，因為它們可能缺少 webpack 功能以及/或者缺少相關 package 包。
本地安裝
webpack v4+ 開始需要與webpack-cli（此工具用於在命令列中執行 webpack）一起安裝：
mkdir webpack-demo && cd webpack-demo npm init -y npm i webpack webpack-cli -D 複製程式碼
注意點
當安裝完成webpack、webpack-cli後，執行時：
webpack -v 'webpack' 不是內部或外部命令，也不是可執行的程式 或批處理檔案。 複製程式碼
發現webpack不是內部指令，其實是沒有全域性webpack變數的原因，但是官方不推薦全域性安裝 webpack ，因為這樣這會將你專案中的 webpack 鎖定到指定版本，並且在使用不同的 webpack 版本的專案中，可能會導致構建失敗。
解決辦法
我們在安裝Node.js的時候,順帶的把npm、npx 安裝了， 在這裡重點是npx ，所以我們需要使用npx執行webpack的命令。如下：
npx webpack -v 4.30.0 複製程式碼
這樣就解決了不安裝全域性webpack導致的問題。
Hello World
解決上面問題後，進入正題，零配置Hello World。
新增src/index.js、index.hmtl檔案。目錄如下：
lesson-01 |- node-modules |- package.json |- package-lock.json + |- /src +|- index.js + |- index.html 複製程式碼
src/index.js
console.log('Hello World!');
複製程式碼
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="./dist/main.js"></script> </body> </html> 複製程式碼
現在使用npx執行webpack命令：
npx webpack
Hash: 512808a97d0c43adbe09
Version: webpack 4.30.0
Time: 602ms
Built at: 2019-04-21 10:51:34
AssetSizeChunksChunk Names
main.js957 bytes0[emitted]main
Entrypoint main = main.js
[0] ./src/index.js 28 bytes {0} [built]
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
複製程式碼
執行後，會看到根目錄下生成了dist/main.js目錄及檔案。這是webpack v4+ 預設匯出打包的路徑以及檔名稱，而預設打包的入口既是src/index.js。
在看看上面的打包結果發現有一個警告，意思是在webpack v4+ 開始需要一個mode的配置選項，此選擇是用來選擇打包的模式，選項有兩個值，分別為：development、production，開發環境、生產環境。不配置默使用的是production，但是不寫引數會有此警告。所以儘可能的寫上mode引數！
在執行命令之前，觀察dist/main.js檔案的變化，即可知道引數值不同的打包效果。
現在我們再次執行一下webpack命令：
npx webpack --mode development
Hash: 44b171184298522aaf01
Version: webpack 4.30.0
Time: 128ms
Built at: 2019-04-21 11:04:20
AssetSizeChunksChunk Names
main.js3.8 KiBmain[emitted]main
Entrypoint main = main.js
[./src/index.js] 28 bytes {main} [built]
複製程式碼
現在已經解決警告的問題。