一個打包工具一個模塊加載工具各種資源都可以當成模塊來處理網站 http://webpack.github.io/如今，越來越多的javaScript代碼被使用在頁面上，我們添加很多的內容在瀏覽器里。如何去很好的組織這些代碼，成為了一個必須要解決的難題。
對于模塊的組織，通常有如下幾種方法：
通過書寫在不同文件中，使用script標簽進行加載CommonJS進行加載（NodeJS就使用這種方式）AMD進行加載（require.js使用這種方式）ES6模塊思考：為什么只有JS需要被模塊化管理，前臺的很多預編譯內容，不需要管理嗎？
基于以上的思考，WebPack項目有如下幾個目標：
將依賴樹拆分，保證按需加載保證初始加載的速度所有靜態資源可以被模塊化可以整合第三方的庫和模塊可以構造大系統從下圖可以比較清晰的看出WebPack的功能
這是一個示意圖
WebPack的特點
豐富的插件，方便進行開發工作大量的加載器，包括加載各種靜態資源代碼分割，提供按需加載的能力發布工具WebPack的優勢
webpack 是以 commonJS 的形式來書寫腳本滴，但對 AMD/CMD 的支持也很全面，方便舊項目進行代碼遷移。能被模塊化的不僅僅是 JS 了。開發便捷，能替代部分 grunt/gulp 的工作，比如打包、壓縮混淆、圖片轉base64等。擴展性強，插件機制完善，特別是支持 React 熱插拔（見 react-hot-loader ）的功能讓人眼前一亮。WebPack的安裝
安裝命令$ npm install webpack -g使用webpack$ npm init # 會自動生成一個package.json文件$ npm install webpack --save-dev #將webpack增加到package.json文件中可以使用不同的版本$ npm install webpack@1.2.x --save-dev如果想要安裝開發工具$ npm install webpack-dev-server --save-devWebPack的配置
每個項目下都必須配置有一個 webpack.config.js ，它的作用如同常規的 gulpfile.js/Gruntfile.js ，就是一個配置項，告訴 webpack 它需要做什么。
下面是一個例子
var webpack = require('webpack');var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');module.exports = { //插件項 plugins: [commonsPlugin], //頁面入口文件配置 entry: { index : './src/js/page/index.js' }, //入口文件輸出配置 output: { path: 'dist/js/page', filename: '[name].js' }, module: { //加載器配置 loaders: [ { test: //.CSS$/, loader: 'style-loader!css-loader' }, { test: //.js$/, loader: 'jsx-loader?harmony' }, { test: //.scss$/, loader: 'style!css!sass?sourceMap'}, { test: //.(png|jpg)$/, loader: 'url-loader?limit=8192'} ] }, //其它解決方案配置 resolve: { root: 'E:/github/flux-example/src', //絕對路徑 extensions: ['', '.js', '.json', '.scss'], alias: { AppStore : 'js/stores/AppStores.js', ActionType : 'js/actions/ActionType.js', AppAction : 'js/actions/AppAction.js' } }};plugins 是插件項，這里我們使用了一個 CommonsChunkPlugin的插件，它用于提取多個入口文件的公共腳本部分，然后生成一個 common.js 來方便多頁面之間進行復用。entry 是頁面入口文件配置，output 是對應輸出項配置 （即入口文件最終要生成什么名字的文件、存放到哪里）module.loaders 是最關鍵的一塊配置。它告知 webpack 每一種文件都需要使用什么加載器來處理。 所有加載器需要使用npm來加載最后是 resolve 配置，配置查找模塊的路徑和擴展名和別名（方便書寫）WebPack開始使用
這里有最基本的使用方法，給大家一個感性的認識
正確安裝了WebPack，方法可以參考上面書寫entry.js文件document.write("看看如何讓它工作！");書寫index.html文件<html><head><meta charset="utf-8"></head><body><script type="text/Javascript" src="bundle.js" charset="utf-8"></script></body></html>執行命令，生成bundle.js文件$ webpack ./entry.js bundle.js在瀏覽器中打開index.html文件，可以正常顯示出預期增加一個content.js文件module.exports = "現在的內容是來自于content.js文件！";修改entry.js文件document.write(require("./content.js"));執行第四步的命令進行加載器試驗
增加style.css文件body {background: yellow;}修改entry.js文件require("!style!css!./style.css");document.write(require("./content.js"));執行命令，安裝加載器$ npm install css-loader style-loader # 安裝的時候不使用 -g執行webpack命令，運行看效果可以在命令行中使用loader$ webpack ./entry.js bundle.js --module-bind "css=style!css"使用配置文件默認的配置文件為webpack.config.js
增加webpack.config.js文件module.exports = { entry: "./entry.js", output: { path: __dirname, filename: "bundle.js" }, module: { loaders: [ { test: //.css$/, loader: "style!css" } ] }};執行程序$ webpack發布服務器
安裝服務器$ npm install webpack-dev-server -g$ webpack-dev-server --PRogress --colors服務器可以自動生成和刷新，修改代碼保存后自動更新畫面http://localhost:8080/webpack-dev-server/bundle
新聞熱點
疑難解答
