前端項目建構架構有很多，常見的有grunt，gulp，為什麼還有webpack呢？
前端建構工具一般都是将js合并壓縮，css合并壓縮，以達到減少體積，提高加載速度的目的。webpack與grunt,gulp的側重點不同。但是功能都能滿足。
webpack建構也是基于node項目，需要将webpack,webpack-cli等加入依賴中。同時還需要全局安裝webpack與webpack-cli，下面給出一個示例，我們編寫一個頁面index.html，外加兩個js檔案greeter.js和index.js，greeter.js是建立一個html節點，index.js是利用greeter.js建立節點的方法來給頁面id=root的元素增加這個節點。思路很簡單，最終我們需要利用webpack來打包greeter.js和index.js來組成bundle.js，而index.html頁面就加載bundle.js。下面來通過執行個體來實作這個建構。
1、建立目錄webpackdemo。
2、指令行下在webpackdemo目錄中，利用npm init -y初始化項目，這時候會生成package.json檔案。
3、npm install webpack webpack-cli --save-dev。
4、因為我們要在指令行下直接使用webpack指令，是以需要全局安裝，而全局使用webpack，還需要全局安裝webpack-cli。
npm install webpack webpack-cli -g
5、編寫index.html,greeter.js,index.js。
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>webpack-demo</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
greeter.js
module.exports=function(){
var ele = document.createElement("div");
ele.textContent = "hello,webpack.";
return ele;
}
index.js
var greeter = require("./greeter");
document.getElementById("root").appendChild(greeter());
6、一般預設我們可以通過webpack index.js -o bundle.js來建構，但是很不友善。
通過這個建構，我們發現出現一個警告，就是我們沒有指定mode選項，這裡可以指定mode為development或者production。我們在後面通過webpack.config.js配置檔案來指定，這樣建構就不會出現這個警告了。
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/configuration/mode/
7、為了通過webpack指令就能建構，我們需要配置webpack.config.js檔案。
module.exports = {
entry: __dirname+"/src/index.js",
output:{
path:__dirname+"/public",
filename:'bundle.js'
},
mode:"development"
}
8、目錄結構
webpackdemo
|-- node_modules
|-- public
| |-- index.html
|-- src
| |-- greeter.js
| |-- index.js
|-- package.json
|-- webpack.config.js
有了webpack.config.js檔案，我們就不用通過指令webpack src/index.js -o public/bundle.js來進行建構了。我們直接在指令行中輸入webpack即可。
建構成功，我們可以打開浏覽器檢視public/index.html檔案的内容了。如下所示：
通過這個示例，我們大概知道了webpack可以将多個js檔案合并為一個js檔案。這就是webpack建構的一部分。
這裡我們可以增加一個webpack-dev-server的依賴，他可以建構一個http的服務，我們運作webpack-dev-server --open不僅可以開啟http服務8080端口，還可以直接打開預設的浏覽器，通路我們的項目首頁。
npm install webpack-dev-server --save-dev
安裝完依賴，我們需要配置兩個地方，一個是package.json的配置檔案，增加script兩個指令，一個是start，就是運作我們的webpack打包指令，另一個是server，就是webpack-dev-server --open開啟http服務并打開浏覽器通路http://localhost:8080/index.html頁面。
package.json
webpack.config.js
devServer配置了一個重要的屬性就是設定項目根目錄contentBase，這裡指定的是public目錄，也就是index.html檔案所在的目錄，這樣打開浏覽器就預設可以通路到index.html檔案了。
配置完成，我們現在運作npm start就可以進行webpack建構了，運作npm run server就可以開啟http的8080端口服務了。
指令行運作結果：
預設會打開浏覽器，然後通過ip與端口的形式通路我們的項目首頁。