本文大量借鑒 《 入門Webpack，看這篇就夠了》一文，這是一篇超清晰的好文，有興趣的朋友可以去看看
一，什麼是webpack
通俗的了解，webpack就是一個專門來打包項目的工具，它會分析你的項目結構，找到各個javascript子產品以及其它的一些浏覽器不能直接運作的拓展語言（Scss，TypeScript等），并将它們打包轉為浏覽器可以識别的格式。
二，安裝 我們用npm安裝webpack，那npm又是什麼呢？npm是Node.js的包管理器，是Node Packaged Modules的簡稱，我們隻需要安裝node.js就安裝了npm，安裝了npm後，我們接着把git也裝了。這一套下來，以後你要裝什麼工具基本都不需要再裝其他的另外的東西了。安裝git也是很簡單的，跟node.js一樣，一路next即可。 安裝好git之後，點選開始菜單，找到git檔案夾，找到其目錄下的Git Bash（類似于指令行視窗），點選打開它。
開始進入正題啦，全局安裝webpack，指令行視窗（終端）上輸入 npm install -g webpack
接下來我們建立一個空檔案夾（我這裡取名為 0520webpack），然後在指令行下路徑轉到該檔案夾下， 在指令行輸入 npm init 這個指令主要是生成package.json檔案， 這是一個标準的npm說明檔案，裡面蘊含了豐富的資訊，包括目前項目的依賴子產品，自定義的腳本任務等等。 輸入後，指令行視窗會出現一些需要你填寫的資訊，對于現在的我們來說，這些不重要，如果不想填，或者不知道怎麼填就一路回車即可。 上一步好了之後，我們再輸入 npm install --save-dev webpack （這是将webpack安裝到你的項目目錄裡）。 接下來，我們打開剛才建立的檔案夾，在裡面再建立兩個檔案夾，app檔案夾和public檔案夾。 app檔案夾用來存放原始資料和我們将寫的JavaScript子產品，public檔案夾用來存放準備給浏覽器讀取的html檔案（包括使用webpack生成的打包後的js檔案以及一個index.html檔案）。在這裡還需要建立三個檔案，index.html檔案放在public檔案夾中，兩個js檔案（Greeter.js和main.js）放在app檔案夾中，此時項目結構如下圖所示：
index.html檔案隻有最基礎的html代碼，它唯一的目的就是加載打包後的js檔案（bundle.js）
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id='root'>
</div>
<script src="bundle.js"></script>
</body>
</html>
Greeter.js隻包括一個用來傳回包含問候資訊的html元素的函數。
// Greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
}; main.js用來把Greeter子產品傳回的節點插入頁面。
//main.js
var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter()); 三，運作webpack 前面說了這麼多，我們還沒運作看結果呢，指令行視窗（終端）下，轉到項目目錄下 輸入指令： 如果是全局：webpack app/main.js public/bundle.js 如果是局部：node_modules/.bin/webpack app/main.js public/bundle.js 運作後再去我們的項目目錄下，你就會看到生成了bundle.js檔案，這個檔案就是打包好的檔案
最後運作index.html你就看到你成功啦！！但是你發現這麼一大串東西，是不是很容易輸錯，怎麼解決？讓我們繼續看下去。
四，簡化操作
通過配置檔案來使用Webpack
在目前項目目錄檔案夾下建立一個名為webpack.config.js的檔案，并在其中進行最最簡單的配置，如下所示，它包含入口檔案路徑和存放打包後檔案的地方的路徑。
module.exports = {
entry: __dirname + "/app/main.js",//唯一入口檔案
output: {
path: __dirname + "/public",//打包後的檔案存放的地方
filename: "bundle.js"//打包後輸出檔案的檔案名
}
} node_modules/.bin/webpack
這就行啦？沒錯！檢視我們的項目目錄下的public檔案夾，bundle.js又生成啦。
五，更快捷的方式 由于有的小夥伴是用局部指令來執行webpack，這還是有可能會出錯，是以我們還可以通過配置，來進一步簡化我我們的操作。那麼在哪裡呢？就是我們的package.json檔案啦，具體哪裡看下圖。
最後我們來測試一下，我們這次的配置是否成功， 指令行視窗，路徑轉到項目目錄下，輸入 npm start 回車
這就行啦？沒錯！檢視我們的項目目錄下的public檔案夾，bundle.js又生成啦。
教程到此結束啦，快去多練練吧。