webpack集成了模塊載入和打包等功能 ，這兩年在前端圈越來越手歡迎。平時一般是用requirejs、seajs作為模塊載入用，用grunt/gulp作為前端構建。webpack作為模塊化載入相容了amd/cmd模式，並且作為模塊化的資源可以是js/css/image coffeescript/s ...
webpack集成了模塊載入和打包等功能 ，這兩年在前端圈越來越手歡迎。平時一般是用requirejs、seajs作為模塊載入用，用grunt/gulp作為前端構建。webpack作為模塊化載入相容了amd/cmd模式，並且作為模塊化的資源可以是js/css/image coffeescript/sass/less ES2015 modles TypeScript 等功能非常強大，作為前端構建工具還可以和grunt/gulp配合一起使用。 配置文件webpack.config.js也是非常清晰。
一. 安裝webpack
npm install webpack -g 全局安裝，這個時候可能會報錯：npm warn optional dep failed...等錯誤， 可能是nodejs版本太低了 ，nodejs.org下載最新安裝包即可 。
二. 命令行介面
1. 創建2個js文件
cats.js
var cats = ['dave', 'henry', 'martha']; module.exports = cats;
app.js （主文件）
cats = require('./cats.js');
console.log(cats);
在命令行輸出 ：
webpack ./app.js app.bundle.js
將會生成合併壓縮後的 app.bundle.js文件 。 可以直接當做nodejs模塊執行： node app.bundle.js 看效果。
三. 使用配置文件
在項目根目錄下 npm init 創建package.json文件 。這時會提示輸入package相關信息。
npm install webpack --save-dev 下載webpack模塊並且將webpack加入package開發依賴（這樣其他合作開發者就可以直接npm install啦）。
在項目根目錄新建webpack.config.js 裡面就是webpack的相關配置信息了 。
const webpack = require('webpack'); //載入webpack模塊
module.exports = {
entry: './src/app.js', //主入口文件
output: {
path: './bin', //輸出文件目錄
filename: 'app.bundle.js' //輸出文件名
},
plugins: [
new webpack.optimize.UglifyJsPlugin({ //使用uglifyjs插件
compress: {
warnings: false
},
output: {
comments: false
}
})
]
};
webpack自帶了uglifyjs插件以及js loader，所以不需要自己添加額外的插件。
進入到項目根目錄在命令行直接運行webpack就行了。會看到在bin目錄多了個app.bundle.js文件。
目錄結構：
|--src
|--bin
|--node-modules
|--webpack.config.js
對於文件夾的命名，webpack官網是這樣說的：
In the wild, there are many project structures. Some projects use app instead of src. Some projects use dist or build instead of bin. Projects with test usually use test, tests, spec, specs or colocate the test files in the source folder.
當需要載入其他特殊資源時需要下載相關的載入模塊，比如：babel-loader 載入es2015 ( ECMAScript 6 簡稱ES6 , JavaScript語言的新標準。當前版本的ES6是在2015年發佈的，所以又稱ECMAScript 2015 ) ,如果要相容舊版瀏覽器還需要下載babel-polyfill, 這樣就可以愉快的使用es6了。
參考文檔：
https://github.com/petehunt/webpack-howto
http://webpack.github.io/docs/usage.html
http://www.cnblogs.com/vajoy/p/4650467.html
