webpack安裝配置詳解
去年寫過一篇webpack協助React js工作的簡單例子。但是webpack的功能非常強大，並不是專門服務於React js的。之前對webpack理解很模糊，只能簡單使用。最近參考其他一些文件教程，重新學習瞭解了一下webpack的功效。
Webpack簡介
Webpack可以看做是模組打包機：它做的事情是，分析你的專案結構，找到JavaScript模組以及其他的一些瀏覽器不能直接執行的擴充套件語言（Scss，TypeScript, React js等），並將其打包為合適的格式以供瀏覽器使用。
在webpack中，一切資源都被看做是模組，如js，css，圖片，json等等等等。在webpack專案中，js模組可以引進這些模組來使用。
官方圖：
Webpack的使用
1,安裝
webpack安裝的前提是包含NodeJS環境。下面假設機器上已經安裝了node環境。
在任何一個自己喜歡的路徑下建立新的空資料夾，作為webpack的練習資料夾，終端進入該資料夾後執行下面命令安裝webpack
//全域性安裝 npm install webpack //安裝到專案目錄 npm install --save-dev webpack
2,建立目錄結構
終端執行下面命令建立package.json檔案，裡面包含專案依賴的模組，自定義的指令碼任務等等。執行命令時將會提示填寫一些專案資訊，如實填寫或者一直回車跳過就可以。
npm init
舉一個最簡單的webpack打包例子
在該資料夾下直接建立三個檔案，分別為main.js，test.js，main.html
其中test.js的程式碼如下，建立一個div，設定文字為Hello, Webpack，並用module.exports匯出。
var test = document.createElement('div');
test.textContent = 'Hello, Webpack';
module.exports = test;main.js程式碼如下，將test.js中匯出的div匯入，然後將它放到id為content的元素中。
var test = require('./test.js');
document.getElementById('content').appendChild(test);之後在終端執行命令，將main.js作為入口檔案，webpack將自動識別main.js所依賴的其他檔案。然後再指定一個出口檔案bundle.js
webpack main.js bundle.js
命令執行完之後，發現檔案目錄多出了一個bundle.js，將bundle.js引入main.html中，main.html程式碼如下，包含一個id為content的div。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="content"></div>
</body>
<script src="bundle.js"></script>
</html>開啟main.html，將會看到：
這就是webpack使用的一個最最簡單的例子。
3,Webpack的配置
每次在終端都要設定出口檔案和入口檔案非常麻煩。我們可以使用webpack的配置檔案來設定打包的出口和入口。因為上面的例子所有檔案都在根目錄下，太過簡單，所以刪掉目錄下處package.json以外的檔案，重新建立一個例子。
建立後的目錄如下，app目錄下存放入口檔案，public目錄存放唯一的html檔案
之後在目錄下建立名為webpack.config.js的檔案。webpack.config.js這個檔名是webpack預設的配置檔名，如果不想使用這個檔名，可以在終端執行
webpack -config [name]
開啟webpack.config.js檔案，填入資訊
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}
};
entry代表唯一的入口檔案，output設定出口檔案，path代表出口檔案路徑，filename代表出口檔名字。
在終端執行命令，相當於之前執行的webpack [入口] [出口]，只不過這樣更加簡單，不易出錯。
webpack
終端結果：
4,Loaders
webpack專案中，一切皆模組，而實現這個功能的關鍵，就是Loaders。
通過不同的Loader，webpack可以通過呼叫外部的指令碼或工具對各種各樣格式的檔案進行處理。
比如：將json轉化為js，將React轉化為js。
各種Loader都需要單獨安裝，並且需要在配置檔案中進行配置。
下面是幾個Loader例項
1，JSON檔案
(1)安裝轉換json的loader
npm install --save-dev json-loader
(2)配置webpack.config.js
module.exports = {
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
module: {
loaders:[
{
test: /\.json$/,
loader: "json"
}
]
}
};
其中loader的幾個引數說明：
test：一個匹配loaders所處理的檔案的副檔名的正則表示式（必須）
loader：loader的名稱（必須）
include/exclude：手動新增必須處理的檔案（資料夾） 或 不需要處理的檔案（資料夾） （可選）
query：為loaders提供額外的設定選項（可選）
(3)在app目錄下建立json_test.js，引入根目錄的package.json
var config = require('../package.json');
console.log(config);
module.exports = function () {
var test = document.createElement('div');
test.textContent = JSON.stringify(config);
return test;
};
(4)和之前一樣，在mian.js中引入引入json_test.js中的函式，並append到id為content的元素中。
(5)編輯index.html，建立id為content的div，在終端執行webpack，生成bundle.js，並引入到index.html中。
(6)開啟index.html，結果如下：
2，CSS檔案
(1)安裝css-loader和style-loader
npm install --save-dev style-loader css-loadercss-loader使你能夠使用類似@import和url(...)的方法實現require()的功能，style-loader將所有計算後的樣式加入頁面中。