如果你是作爲前端的一員，可能你對webpack 並不陌生。它可以將很多如js,css，圖片等打包成模塊，正應了一切皆模塊。當我們在寫ES6的某些新語法是=時，有些瀏覽器可能不支持，這是我們可以利用webpack 去和babel 去將其轉化爲現在瀏覽器識別的代碼。但是如果你剛接觸webpack, 可能學習起來對一些概念可能不是很理解，去官網看有時候長篇大論的文檔讓人很蒙圈，網上搜索，出來的結果讓人難懂。我今天就來總結一下，webpack 的用法，如果你想更深入的學習，那推薦你去官網看文檔。如果只是想了解，基本使用，我這篇文章大概可以滿足你。
一、webpack前期工作
1、概念：webpack 是一個現代的 JavaScript 應用程序的模塊打包器(module bundler)
2、四個核心！
- 入口(Entry) ：圖表的起點被稱之爲入口起點
- 出口(Output) ：將所有的資源(assets)歸攏在一起後，我們還需要告訴 webpack 在哪裏打包我們的應用程序
- 加載器(Loader) ：webpack loader 會將這些文件轉換爲模塊，而轉換後的文件會被添加到依賴圖表中。
插件(Plugins) ：插件(plugins) 最常用於（但不限於）在打包模塊的“compilation”和“chunk”生命週期執行操作和自定義功能
概念看不懂，沒關係，往下看，當你深入例子時，這些概念自然而然就知道是什麼意思了。
3、前期環境
使用webpack 是需要node.js的環境。這裏安裝node.js 我不做詳細介紹，網上搜很多，傻瓜式安裝。安裝後我們也就可以使用npm了，如果你覺得npm下載的網速慢，你可以使用淘寶提供的淘寶鏡像 cnpm 去安裝，這裏我也不做詳細介紹，網上去搜索怎麼安裝。
新建一個test 文件
二、安裝webpack
1、安裝webpack
全局安裝 npm install webpack -g
你還可以局部安裝 npm install --save-dev webpack
如果你安裝成功會生成一個 node_modules 文件夾，全局安裝會安裝在c盤下邊，局部安裝會安裝在你的項目裏邊。
我這裏是局部安裝的。
2、在test文件中初始化環境： npm init
這時會提示你，設置一些npm包的基本信息，例如名字，版本，描述等等。這裏你可以先不用管它，一直按回車鍵就行。
這時你的文件夾裏應該生成了 package.json 文件（打包發佈時的配置文件）。
3、搭建文件目錄結構
① 在test 文件中建一個app 文件夾 和 build 文件夾，
② 在test文件中建一個webpack.config.js文件 （必須，文件名必須是該文件名）
③ test文件夾中新建一個index.html 文件 和 app.js 文件
app文件夾：是我們的入口文件夾（即entry 要指定的入口文件夾），也就是我們寫代碼，寫js 的文件夾
build文件夾 ：是我們的出口文件夾（即output 指定的出口文件夾），也就是我們js 編譯後要存放的文件夾
webpack.config.js: 是webpack 配置文件，webpack啓動時，會先讀取它。
基礎目錄結構如下：
---app
--index.html
--app.js
---build
---node_modules
---package.json
---webpack.config.js
三、配置webpack.config.js 文件
我們這裏先做一個簡單的例子，讓你更明白，我們把app文件夾下的 app.js 編譯之後（這麼做是因爲有些代碼編譯後才能使用，比如ES6 部分代碼編譯後讓瀏覽器識別，sass 和less 的文件編譯後變成可讀的css文件） ，我們app.js 後放到build 文件夾下。這樣我們需要簡單配置webpack.config.js 文件，配置該文件之前，我們先寫點代碼。
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>app</title>
</head>
<body>
<h1>APP</h1>
<P id="content"></P>
<script src="../bulid/newApp.js"></script>
</body>
</html>app.js:
document.getElementById("content").innerHTML = "我是第一個頁面";好了，我們來配置webpack.config.js 文件
var path = require('path'); // node 全局path API,寫上就行，不要太過於關係
module.exports = {
entry:'./app/app.js',// 入口文件
output:{ // 出口文件
path:path.join(__dirname, 'bulid'), //編譯後文件的保存地址，這裏是相對路徑,記住寫法
filename: 'newApp.js' // 編譯後，生成的文件名字
}
};這是最基礎的配置。
接下來我們啓動wepack:
① 如果你是全局安裝的 直接 在命令行輸入 webpack
② 如果你是局部安裝的 你可以打開 package.json 文件自己配置一下 命令
例如：
將紅色框中的代碼修改爲 “start“：“webpack” 意思是啓動webpack時可以以start 命令代替。
執行： npm start
結果：
表示你已經成功了。這時你的build 文件中將會有一個 newApp.js 文件
這時我們打開index.html 頁面是時展示的是這樣的：
四、多文件編譯
多文件編譯，我們在向app 文件夾下加入一個apptwo.js 和 index-2.html文件，這時app文件夾中有兩個將要編譯的js文件了，
index-2.html 中寫：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>app</title>
</head>
<body>
<h1>APP</h1>
<P id="contentTwo"></P>
<script src="../bulid/apptwo.js"></script> // index.html頁面要引入app.js
</body>
</html>apptwo.js:
document.getElementById("contenTwo").innerHTML = "我是第二個頁面";重點內容
webpack.config.js 文件我們這樣去配置：
var path = require('path');
module.exports = {
entry:{ //入口文件爲多個文件時，用對象寫法
app:'./app/app.js',
apptwo:'./app/apptwo.js'
},
output:{
path:path.join(__dirname, 'bulid'),
filename: '[name].js' //因爲是多文件所以我們用[name]來爲變量起每個文件生成的對應文件名
}
};執行 ： npm start
結果bilud 文件夾下生成app.js 文件和 apptwo.js 文件
app文件夾下的 index.html 和 index-2.html 分別會顯示：
重點內容
在html文件中我們引入js 是這樣引入的 <script src="../bulid/apptwo.js"></script> 其實由於處在node.js 環境中，我們的路徑都是對應的，（相當於在同目錄下）我們就可以寫成這樣 <script src="apptwo.js"></script> 也是能載入js 文件的。
五、自動編譯 熱加載
webpack 爲我們提供了幾個命令：
- webpack // 最基本的啓動webpack的方法
- webpack -w //提供watch方法；實時進行打包更新
- webpack -p // 對打包後的文件進行壓縮
- webpack -d // 提供source map，方便調式代碼
當我們修改要編譯的代碼後我們不希望每次動 啓動一遍webpack, 這時我們就用到了 webpack -w 命令，觀實時察代碼變化。
① 比如我們執行 npm start -w 命令（這裏我們的是局部的，自己配置的命名 ，如果你安裝的是全局的直接使用 webpack -w， ）
② 我們也可以配置 package.json 文件，將其修改爲
修改完成之後 運行 npm start
當我們在修改要編譯的js代碼後，直接刷新瀏覽器，代碼就會改變。
另外，我們想，如果我們修改完代碼後，不用重複啓動webpack,同時也不用自己手動刷新瀏覽器，只要我們一保存，瀏覽器自動刷新該怎麼辦。
這時我們就用到了 webpack 的熱加載。
首先想要使用熱加載，我們要安裝 webpack-dev-server
① 安裝webpack-dev-server 命令 ： npm install webpack-dev-server
②修改 webpack.config.js 文件
var path = require('path'); // node 全局path API,寫上就行，不要太過於關係
module.exports = {
entry:{ //入口文件爲多個文件時，用對象寫法
app:'./app/app.js',
},
output:{ // 出口文件
path:path.join(__dirname, 'bulid'), //編譯後文件的保存地址，這裏是相對路徑,記住寫法
publicPath: '/bulid/', // **主要是增加這一項** 配置編譯時的公共路徑
filename: '[name].js' // 編譯後，生成的文件名字
}
};③ 修改 package.json 文件
④ html 頁面也需要改動一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>webpack變化</h1>
<p id="countent"></p>
<script src="../bulid/app.js"></script>
//這一塊一定要注意，這裏不能寫成 app.js 要寫成具體路徑 ../bulid/app.js 不要實現不了瀏覽器自動刷新功能
</body>
</html>六、壓縮打包文件
上邊我們打包後的js文件，會有好多註釋，和默認的代碼，如圖：
我們想要壓縮代碼，這裏有兩種方法：
1.配置package.json 文件：
然後在執行 webpack -p 命令。
得到的app.js 文件將是壓縮的：
2.配置 webpack.config.js 文件
var path = require('path');
var webpack = require('webpack'); // 增加
module.exports = {
entry:{
app:'./app/app.js',
},
output:{
path:path.join(__dirname, 'bulid'),
publicPath: '/bulid/',
filename: '[name].js'
},
plugins:[ // 添加
new webpack.optimize.UglifyJsPlugin()
]
};然後執行， webpack 就會得到與上述同樣的壓縮代碼。
