一開始用gulp實現js和css文件的打包,減小了請求,同時經過gzip等壓縮方法也能控制文件的大小.可是後來文件愈來愈多,包越打越大.同時還有了如下需求:css
因而gulp就不夠用了.可是偉大的愛折騰的前端程序員們又搞出了webpack這貨.咱們能夠把webpack想作是一個工廠,咱們把文件放在工廠入口,工廠的傳送帶會把把咱們的文件一步步的處理,而後在出口把加工好的文件給吐出來,.恩恩,吐出來的這些就是你和客戶想要的了/吐.其實,gulp更多的是用來構建前端的工做流,而webpack是用來處理模塊化和打包(bundle.js)等操做html
npm install -g webpack
webpack是一個 MODULE BUILDER,目的是把"有依賴關係的各類文件"打包成一系列的"靜態資源"前端
它就是一個配置文件,只須要把配置規則寫在一個叫作webpack.config.js文件裏就好了node
module.exports = { entry:'./entry.js', //也能夠是預先定義一個路徑常量。而後這樣寫 //entry:APP_PATH,//必須,webpack會自動找尋本目錄下的index.js output:{ path:__dirname,//必須 filename:"bundle.js"//必須 }, module:{ loaders:[//注意!!這裏是中括號 { test:/\.css$/, loader:'style!css' } ] } };
另:若執行webpack命令,出現'cannot find module 'webpack/lib/node/NodeTemplatePlugin'錯誤時: 須要設置NODE_PATH 具體見網頁這裏python
若遇到錯誤 "Error: %1 is not a valid Win32 application" 只須要升級python爲3.X版本,可是此處我用的是sass-loader + win7 升級後依然如此,因而就把.sass改爲了.css或者less也能夠webpack
須要先加載一個插件,執行以下命令git
npm install css-loader style-loader
而後再loaders項目裏添加如上內容程序員
在你修改完代碼,而且保存後,這個插件會自動刷新瀏覽器
npm install -g webpack-dev-server --save-dev //而後 webpack-dev-server --progress --colors
以後你能夠打開github
http://localhost:8080/webpack-dev-server/bundle
注意:這樣你能夠在上面的網址實時查看到全部的修改,可是這並不表明你的修改已經直接生效了。 在你修改完以後,你應該再執行一次webpack命令,才能把所作的修改真正的編譯成功web