超簡單 webpack 打包工具入門
對前端這個崗位來說，模塊化開發是必須要走的一個過程，這其中打包工具的使用必不可少，下面我就說一下 webpack 打包工具的用法，非常簡單，學會它，webpack 你就入門了。
使用 webpack 前，你需要準備什麽？
- 安裝 node
- 淘寶鏡像 cnpm（最好有）
- 安裝 webpack
如果前兩步你都已經有了，那麽可以直接跳轉到第三步，安裝 webpack 命令行如下：
1、全局安裝 webpack
cnpm install -g [email protected]
這裏你可以指定版本安裝，也可以不指定，但是 webpack 的最新版本可能是有問題的，所以要是安裝最新版本，可要做好項目不能運行的準備（我就碰到了，悲傷）
2、創建一個空文件，並進入，及本地安裝項目運行時的依賴（如果你已經安裝了 git，可以直接右鍵=>git bash here如果沒有，可以 win+r => cmd 命令行進入），然後本地安裝
cnpm install --save-dev [email protected]
3、依賴項全部下載完之後，創建一個 package.json 文件，創建完成之後，如果你的 package.json 文件夾裏面沒有很多的依賴項，總共只有簡短的十幾行的話，那就從第二步重來一遍，其中，命令跑完之後，會跳出很多關於項目的描述，一路 enter 默認過去就行
cnpm init
4、如果接下來的步驟中，你不知道怎麽出問題了，怎麽也解決不了，可以刪除 webpack ，然後重新來過，不然你會很頭疼的
npm uninstall webpack -g (全局卸載)
5、在本地安裝完成之後，你就可以敲代碼了，首先在空文件下創建兩個文件夾，一個存放源碼，一個存放瀏覽器讀取的代碼，創建的方式有很多種，不過高大上一點，你可以使用 git 命令
mkdir app //存放源碼
mkdir public //存放瀏覽器讀取的文件
然後在 app 文件夾下指定兩個文件，一個是 Greeter.js，一個是 main.js（做入口文件使用），public 文件夾下指定 index.html 文件，然後整個的結構樹如下：
其中，bundle.js 是我們編譯後的文件名稱，後面有解釋
其中，index.html 的文件內容如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="root"></div> <script src="bundle.js"></script>//直接引入接下來要編譯的文件名稱 </body> </html>
Greeter.js 文件內容如下：
module.exports = function () {
var greet = document.createElement("div");
greet.textContent = "Hello Webpack";
return greet;
}
main.js 文件內容如下：
const greeter = require("./Greeter.js");
document.querySelector("#root").appendChild(greeter());
其實呢，到了這一步，你就可以直接在控制臺打包應用了，通過 webpack "入口文件路徑" "編譯後的文件路徑" （實際編譯引號不帶，但是這種方法容易出錯），使用最廣的打包方式是 webpack 打包，步驟如下：
6、在項目的根目錄下創建一個 webpack.json.js 的文件，裏面的內容如下：
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}
}
這其中呢，對初學者來說有很大的坑，希望大家別犯，就是"__dirname"是兩個下劃線，不是一個，哎，好悲傷，其中呢，entry 是指定的入口文件路徑，__dirname 是 node.js 的一個變量，指向的當前的目錄；output 是打包後的文件所存放的地方和生成的編譯文件的名稱，然後呢，就可以直接在控制臺打印了，如果和下面的差不多，那就代表成功了
然後你就可以向往常一樣的方式打開 index.html 文件就可以了，
感謝這兩篇文章的貢獻者，謝謝
https://www.jianshu.com/p/42e11515c10f
https://blog.csdn.net/wanxue0804/article/details/79427332
超簡單 webpack 打包工具入門