最近在項目中使用了一下webpack，所以這里打算對目前了解的使用方法做一個小小的總結
為什么是webpack
1.webpack一下自己就🔥了，這絕對是一個重要的原因。
2.然后我之前項目中都是通過requireJS，通過AMD來做到模塊化開發。webpak不僅支持打包，而且支持AMD 和 CommonJS方式來做模塊化開發，所以打算嘗試一下webpack來實現模塊化。
3.我的需求簡單，適合新上手webpack，只需要生成上線目錄，實現模塊化，壓縮代碼等等
webpack實戰
webpack.config.js 一般寫法
開頭聲明對路徑相關的變量，以及引入依賴，包括webpack(非必須)，以及需要的插件
然后，entry 聲明入口相關的如文件名，路徑等，output 聲明生成文件相關的路徑和文件名，module 中是針對不同文件進行處理的 loader 聲明，plugins 聲明了插件的具體使用。
壓縮代碼
這里使用webpack的內置的插件，我們寫在webpack.config.js 中的plugins 部分
new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }})提取公共類庫
這部分我沒有用到，但也是基于webpack 內置的插件，目的是將用到的jquery 等第三方庫整合到一個文件，否則都合并到一個文件，會造成這個文件特別大
首先在entry 聲明第三方庫
entry: { app: path.resolve(APP_PATH, 'index.js'), //添加要打包在vendeors里面的庫 vendors: ['jquery', 'moment']},plugins: { //把入口文件里面的數組打包成vendors.js new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),}css 單獨打包
有的時候需要將css 單獨打包，作為CDN，或者我這里的情況是是，頁面引入了很多的css js 文件，而我的js 在最后加載！所以如果是js 中引入的css ，那么會導致頁面在開始的時候沒有樣式，知道解析到我的js ！所以這里將css 單獨打包，單獨在頁面引入！
首先需要安裝插件