webpack 學習筆記

webpack是近期最火的一款模塊加載器兼打包工具，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作爲模塊來使用和處理。

一. 安裝

我們常規直接使用 npm 的形式來安裝：

$ npm install webpack -g

當然如果常規項目還是把依賴寫入 package.json 包去更人性化：

$ npm init
$ npm install webpack --save-dev

二. 配置

每個項目下都必須配置有一個 webpack.config.js ，它的作用如同常規的 gulpfile.js/Gruntfile.js ，就是一個配置項，告訴 webpack 它需要做什麼。

<pre style="font-family: 宋體; font-size: 9pt; background-color: rgb(255, 255, 255);"><pre name="code" class="javascript">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' },//.css 文件使用 style-loader 和 css-loader 來處理
			{ test: /\.js$/, loader: 'jsx-loader?harmony' }, //.js 文件使用 jsx-loader 來編譯處理
			{ test: /\.scss$/, loader: 'style!css!sass?sourceMap'}, //.scss 文件使用 style-loader、css-loader 和 sass-loader 來編譯處理
			{ test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} //圖片文件使用 url-loader 來處理，小於8kb的直接轉爲base64
		]
	},
	//其它解決方案配置
	resolve: {
		root: 'E:/github/flux-example/src', //絕對路徑//查找module的話從這裏開始查找
		extensions: ['', '.js', '.json', '.scss'],//自動擴展文件後綴名，意味着我們require模塊可以省略不寫後綴名
		alias: { //模塊別名定義，方便後續直接引用別名，無須多寫長長的地址
			AppStore : 'js/stores/AppStores.js',//後續直接 require('AppStore') 即可
			ActionType : 'js/actions/ActionType.js',
			AppAction : 'js/actions/AppAction.js'
		}
	}
};

輸入：

entry:{
   build:["./app/index.js","./app/abc.js"],//數組
   //abc:"./app/abc.js"
},

輸出：

output:{
   path:"./build/",
   filename:"[name].js"
},

此種情況，輸出的只有build.js

輸入：

entry:{

   build:"./app/index.js",
   abc:"./app/abc.js"
},
output:{
   path:"./build/",
   filename:"[name].js"
},

此種情況，輸出的有build.js,      abc.js兩個

⑴ plugins 是插件項，這裏我們使用了一個 CommonsChunkPlugin 的插件，它用於提取多個入口文件的公共腳本部分，然後生成一個 common.js 來方便多頁面之間進行復用。

⑵ entry 是頁面入口文件配置，output 是對應輸出項配置（即入口文件最終要生成什麼名字的文件、存放到哪裏），其語法大致爲：

⑶ module.loaders 是最關鍵的一塊配置。它告知 webpack 每一種文件都需要使用什麼加載器來處理：

"-loader"其實是可以省略不寫的，多個loader之間用“!”連接起來。

注意所有的加載器都需要通過 npm 來加載，並建議查閱它們對應的 readme 來看看如何使用。

拿最後一個 url-loader 來說，它會將樣式中引用到的圖片轉爲模塊來處理，使用該加載器需要先進行安裝：

npm install url-loader -save-dev

⑷ 最後是 resolve 配置，這塊很好理解，直接寫註釋了：

webpack 的執行也很簡單，直接執行

$ webpack --display-error-details

即可，後面的參數“--display-error-details”是推薦加上的，方便出錯時能查閱更詳盡的信息（比如 webpack 尋找模塊的過程），從而更好定位到問題。

$ webpack --config XXX.js   //使用另一份配置文件（比如webpack.config2.js）來打包

 

$ webpack --watch   //監聽變動並自動打包

 

$ webpack -p    //壓縮混淆腳本，這個非常非常重要！

 

$ webpack -d    //生成map映射文件，告知哪些模塊被最終打包到哪裏了