webpack備忘錄

開始

一開始用gulp實現js和css文件的打包,減小了請求,同時經過gzip等壓縮方法也能控制文件的大小.可是後來文件愈來愈多,包越打越大.同時還有了如下需求:

• 按需加載
• 模塊化開發
• 文件修改自動更新
• 圖片自動合併

因而gulp就不夠用了.可是偉大的愛折騰的前端程序員們又搞出了webpack這貨.咱們能夠把webpack想作是一個工廠,咱們把文件放在工廠入口,工廠的傳送帶會把把咱們的文件一步步的處理,而後在出口把加工好的文件給吐出來,.恩恩,吐出來的這些就是你和客戶想要的了/吐.其實,gulp更多的是用來構建前端的工做流,而webpack是用來處理模塊化和打包(bundle.js)等操做

安裝

npm install -g webpack

功能

webpack是一個 MODULE BUILDER,目的是把"有依賴關係的各類文件"打包成一系列的"靜態資源"

形式

它就是一個配置文件,只須要把配置規則寫在一個叫作webpack.config.js文件裏就好了

怎麼寫

• 配置文件分爲三大塊
  1. entry 入口,"webpack工廠"入口,也就是"源文件"地址
  2. output 出口,webpack加工完的文件放在哪裏
  3. module 模塊,配置用什麼模塊來處理什麼類型的文件

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 具體見網頁這裏

若遇到錯誤 "Error: %1 is not a valid Win32 application" 只須要升級python爲3.X版本,可是此處我用的是sass-loader + win7 升級後依然如此,因而就把.sass改爲了.css或者less也能夠

加載css文件

須要先加載一個插件，執行以下命令

npm install css-loader style-loader

而後再loaders項目裏添加如上內容

webpack-dev-server

在你修改完代碼,而且保存後,這個插件會自動刷新瀏覽器

npm install -g webpack-dev-server --save-dev
//而後
webpack-dev-server --progress --colors

以後你能夠打開

http://localhost:8080/webpack-dev-server/bundle

注意:這樣你能夠在上面的網址實時查看到全部的修改，可是這並不表明你的修改已經直接生效了。 在你修改完以後，你應該再執行一次webpack命令，才能把所作的修改真正的編譯成功

英文參考