上一篇文章 （一）webpack入門——webpack的安裝 中，我們知道了webpack的安裝，接下來我們要學習如何使用webpack。
以下內容來自webpack文檔（不是直譯）: http://webpack.github.io/docs/usage.html
簡單的webpack使用
創建一個模塊化的Javascript項目
創建一個文件件，在文件夾里面創建兩個js文件，分別命名為cats.js、app.js，並使用CommonJs語法來創建文件內容。
cats.js文件內容：
var cats = ['dave', 'henry', 'martha']; module.exports = cats;
app.js(entry point)內容：
cats = require('./cats.js');
console.log(cats);
'entry point'即應用程序開始的地方，也是webpack開始跟蹤模塊之間依賴的地方。
開始打包
給webpack一個人口文件（app.js）,設置一個特殊的輸出文件（app.bundle.js）:
webpack
app.js app.bundle.js
app.bundle.js部分內容：
由此可見，不僅app.js里面的內容被打包進app.bundle.js，app.js所依賴度cats.js也被打包了進來。webpack打包原理是邊讀邊分析入口文件的依賴，分析入口文件依賴的文件的依賴，以此類推，只要有依賴都去分析並打包到輸出文件(app.bundle.js)中,下圖很直觀的展示了webpack打包原理：
打包文件已打包好，現在可以用運行 node app.bundle.js 命令看看輸出內容(cats模塊被輸出出來了)：
復雜的webpack使用
通過以上內容，我們大概知道了webpack是怎么打包運行的，現在我們來看看復雜一點的案例。
webpack 是一個非常靈活的模塊打包工具。它提供了很多高級特性，但是不是所有的特性都是通過命令行來使用的。想要使用更多的webpack特性，需要創建配置文件。
項目結構
在真實的webpack項目中，我們會將資源文件和打包文件分開組織在不同的文件夾中。在接下來的例子中我們將資源文件放在 src 文件夾中，打包文件放在 dist 中。
我們最終的項目目錄結構是這樣的：
開始創建項目，創建文件夾及文件。
1.創建項目文件命名為demo
2.在demo文件夾中創建src和dist文件夾
3.在src文件夾中創建app.js、cats.js，內容和對應的上面的app.js、cats.js內容一樣。
4.用以下命令初始化項目，創建package.json配置文件。
npm init
5.安裝webpack插件，並且講webpack插件配置到package.json文件中
npm install webpack --save-dev
創建及配置webpack配置文件
1.創建webpack.config.js文件，內容為：
module.exports = {
entry: './src/app.js',
output: {
path: './dist',
filename: 'app.bundle.js'
}
};
2.有了配置文件后，就可以簡單的用webpack命令進行打包了 .
webpack
dist文件夾下就多了一個app.bundle.js文件.
3. 運行node dist/app.bundle.js命令，又可以得到cats的數組列表。
node
dist/app.bundle.js
['dave', 'henry', 'martha']
使用loaders
webpack只支持本地JavaScript模塊，但是很多人使用ES2015、CoffeeScript、TypeScript等的轉譯器。webpack的‘loaders’即可解決轉譯的問題。Loaders是特殊的模塊，webpack用來加載其他的用別的語言寫的模塊到webpack可以識別的JavaScript中。例如，babel-loader使用Babel來加載ES2015文件。
'json-loader'加載JSON文件
Loaders可以是被鏈接的，的確有些時候你需要講loaders鏈接在一起。例如。‘yaml-loader’只能將YAML轉換成JSON.因此，你需要將它鏈接到‘json-loader’所以才可以使用。
用babel-loader轉譯ES2015
在這個例子中，我們將會告訴webpack通過Babel運行我們的資源文件所以我們可以使用ES2015的特性
1.安裝Babel和presets:
npm install babel-core babel-preset-es2015
2.安裝babel-loader:
npm install babel-loader --save-dev
3.添加一個以.babelrc命名的文件，並使用presets配置Babel
{ "presets": [ "es2015" ] }
4.修改 webpack.config.js使得'babel-loader'來處理所有.js結尾的文件
module.exports = {
entry: './src/app.js',
output: {
path: './dist',
filename: 'app.bundle.js',
},
module: {
loaders: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
}]
}
}
其中exclude: /node_modules/配置是將node_modules文件下的內容排除在外，降低編譯時間。
5.安裝你想使用的libraries例如jquery
npm install jquery babel-polyfill --save
現在我們使用--save代替之前使用的--save-dev，這些libraries將在運行時候使用。我們使用了babel-polyfill,因此在老的瀏覽器中ES2015 API是可用的。
6.修改src/app.js文件
import 'babel-polyfill';
import cats from './cats';
import $ from 'jquery';
$('<h1>Cats</h1>').appendTo('body');
const ul = $('<ul></ul>').appendTo('body');
for (const cat of cats) {
$('<li></li>').text(cat).appendTo(ul);
}
7.用webpack打包模塊
webpack
8. 加載index.html文件這個app才能運行起來
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
</head>
<body>
<scriptsrc="dist/app.bundle.js"charset="utf-8"></script>
</body>
</html>
當你打開index.html時，你可以看到cats的內容列表
使用插件
在你的工作流程中，通常你想做一些額外的包的處理。例如壓縮文件便於客戶端更快速的加載。插件可以解決這個問題。我們將會增加uglify插件到配置文件中：
const webpack = require('webpack');
module.exports = {
entry: './src/app.js',
output: {
path: './dist',
filename: 'app.bundle.js',
},
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel',
}]
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
},
output: {
comments: false,
},
}),
]
}
uglify插件包含在webpack里，所以不需要額外的引用模塊，但是不是所有的都是這樣，webpack不包含的插件，第三方插件或者自己寫的插件是要包含額外的引用模塊的。