爲什麼要學習webpack？
1、webpack 是當下最熱門的前端資源模塊化管理和打包工具。它可以將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。
還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。通過 loader 的轉換，任何形式的資源都可以視作模塊.
比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等
--------------------------------------------------引用來自webpack文檔
2、vue-cli腳手架使用的webpack作爲打包工具
3、後面會學習使用vue-cli腳手架，所以必須熟悉webpack
安裝webpack
方法1：npm install webpack -g //全局安裝
方法2：npm install webpack --save //安裝到你的項目目錄準備工作
1、在當前項目路徑下使用npm init初始化項目。回車後會出現一些選項，例如：項目名稱，版本，說明，git倉庫等等。一律默認回車就好（假如你要提供到npm上，建議好好了解這些選項的意思）。完成後，根目錄會出現一個package.json文件，這是一個說明文件，裏面包含了剛纔我們默認的選項，第三方依賴包，自定義的腳本等。
2、使用第二個方法安裝webpack
npm install webpack --save //安裝到你的項目目錄3、在根目錄創建一個src文件夾,進入src文件夾創建main.js
var div2 = document.createElement('div');
div2.textContent = "hello vuejs";
document.getElementById('main').appendChild(div2);再在根目錄下創建一個index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main">
</div>
<script src="dist/bundle.js"></script>
</body>
</html>開始使用webpack
在終端中使用webpack命令
語法：
webpack 入口文件 輸出文件
本實例：
webpack src/main.js dist/bundle.js終端輸出信息
此時項目根目錄下多出一個dist文件夾，且包含一個bundle.js文件
如果你的webpack不是全局安裝，則webpack src/main.js dist/bundle.js 要改成 node_modules/.bin/webpack src/main.js dist/bundle.js
到這裏，我們就已經成功打包了一個文件，怎麼樣，是不是很簡單？
但是，每次在終端輸入這麼多東西，好麻煩啊！這個時候就需要我們配置webpack.config.js文件了
webpack.config.js
在根目錄創建webpack.config.js文件
module.exports = {
entry: __dirname + '/src/main.js',//入口文件
output: { //輸出文件
path: __dirname + '/dist/', //文件打包後存放文件的目錄
filename: 'bundle.js' //文件打包後存放的文件的文件名
}
};在終端執行命令 webpack ,輸出內容
成功打包文件。當我們執行webpack命令時，它會到當前根目錄下尋找webpack.config.js文件。
做過nodejs項目的朋友對於package.json下的scripts應該都不陌生，我們可以通過自定義一些腳本，以便更加方便的編譯或運行項目。
爲了讓webpack使用起來更加方便，我們也可以這樣做。
使用package.json中的腳本打包文件
在package.json裏的scripts加入
"build": "webpack --progress" //--progress 顯示進度(json文件不允許添加註釋，這裏只爲解釋progress)在終端執行
npm run build
哈哈，還是npm大法好啊！
但是，這裏有個問題，如果我們修改了main.js 比如在裏面加入
div2.setAttribute('style','color: red');要想頁面獲取這個效果，我們需要重新打包一次，刷新頁面後才能得到效果。這肯定不是我們想要的。
我們可以使用webpack-dev-server來解決問題
webpack-dev-server
webpack-dev-server 提供了一個服務器和實時重載（live reloading） 功能。當我們在文件中做些更改並且保存。可以在控制檯中看到正在編譯。完成之後，頁面會自動刷新
如何使用webpack-dev-server
1、安裝webpack-dev-server
npm install webpack-dev-server -g //全局安裝
npm install webpack-dev-server --save-dev //安裝到當前項目devServer: {
contentBase: __dirname,//告訴服務器從哪裏提供內容。只有在你想要提供靜態文件時才需要
publicPath: '/dist/',//使此路徑下的打包文件可以在瀏覽器中使用
inline: true, //使用內聯模式，當內容改變實時重載時，腳本將被插入到你的包(bundle)中，並且構建消息將會出現在瀏覽器控制檯
open: true //瀏覽器打開
}3、終端執行命令
webpack-dev-server同樣，如果你的webpack-dev-server不是安裝在全局，請使用以下命令執行
node_modules/.bin/webpack-dev-server終端顯示
消息中有一句:project is running at http://localhost:8081/ 表示項目運行在8081端口
訪問頁面，在瀏覽器地址欄輸入 http://localhost:8081或http://127.0.0.1:8081訪問頁面
成功訪問。
這時候我們再修改main.js,在裏面隨便加入任何不會報錯的語句
例如：
console.log("不用每次都重新打包文件啦")保存文件後發現終端正在編譯，完成後切換到已經打開的頁面，控制檯成功打印“不用每次都重新打包文件啦”
注：網上有小夥伴說直接在webpack.config.js中配置webpack-dev-server有時並不能實現自動刷新（博主是沒有遇到過）。
解決方法：可以在package.json中添加一個腳本來運行
"dev": "webpack-dev-server --open --inline"執行npm run dev自動打開頁面。
同樣隨便修改內容。頁面自動同步
-------------------------------------------------------------------------------------------------------
本文講解了如何正確安裝webpack、如何打包文件以及使用webpack-dev-server實現頁面自動重載