一、什么是webpack：webpack是一款模塊加載兼打包工具，它可以將js、jsx、coffee、樣式sass、less，圖片等作為模塊來使用和處理。
二、優(yōu)勢：1、以commonJS的形式來書寫腳本，對AMD、CMD的支持也很全面，方便舊項目的遷移。2、能被模塊化的不止是JS了。3、能替代部分grunt/gulp的工作，例如打包，壓縮混淆，圖片轉base64等。3、擴展性強，插件機制完善，支持React熱拔插（react-hot-loader）
三、安裝和配置：
1、安裝：直接使用npm來進行安裝
$ npm install webpack -g
將依賴寫入package.json包
$ npm init
$ npm install webpack --save-dev
2、配置：
每個項目必須配置一個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'
}
}
};
(1)plugins是插件項，這里使用了一個CommonsChunkPlugin的插件，它用于提取多個入口文件的公共腳本部分，然后生成一個common.js來方便多頁面之間的復用。
(2)entry是頁面的入口文件配置，output是對應的輸出項配置
{
entry: {
page1: "./page1",
//支持數組形式，將加載數組中的所有模塊，但以最后一個模塊作為輸出
page2: ["./entry1", "./entry2"]
},
output: {
path: "dist/js/page",
filename: "[name].bundle.js"
}
}
該代碼會生成一個page1.bundle.js和page2.bundle.js，并存放在./dist/js/page文件夾下。
(3)module.loaders，告知webpack每一種文件都需要什么加載器來處理
module: {
//加載器配置
loaders: [
//.css 文件使用 style-loader 和 css-loader 來處理
{ test: /.css$/, loader: 'style-loader!css-loader' },
//.js 文件使用 jsx-loader 來編譯處理
{ test: /.js$/, loader: 'jsx-loader?harmony' },
//.scss 文件使用 style-loader、css-loader 和 sass-loader 來編譯處理
{ test: /.scss$/, loader: 'style!css!sass?sourceMap'},
//圖片文件使用 url-loader 來處理，小于8kb的直接轉為base64
{ test: /.(png|jpg)$/, loader: 'url-loader?limit=8192'}
]
}
-loader可以不寫，多個loader之間用“!”連接起來。所有的加載器都需要通過npm來加載。
例如最后一個url-loader，它會將樣式中引用到的圖片轉為模塊來處理。使用前進行安裝：
$ npm install url-loader -save-dev
配置信息的參數：“?limit=8192”表示將所有小于8kb的圖片都轉為base64形式(超過8kb的才使用url-loader來映射到文件，否則轉為data url形式)
(4)resolve配置，
resolve: {
//查找module的話從這里開始查找
root: 'E:/github/flux-example/src', //絕對路徑
//自動擴展文件后綴名，意味著我們require模塊可以省略不寫后綴名
extensions: ['', '.js', '.json', '.scss'],
//模塊別名定義，方便后續(xù)直接引用別名，無須多寫長長的地址
alias: {
AppStore : 'js/stores/AppStores.js',//后續(xù)直接 require('AppStore') 即可
ActionType : 'js/actions/ActionType.js',
AppAction : 'js/actions/AppAction.js'
}
}
四、運行webpack，直接執(zhí)行：
$ webpack --display-error-details
后面的參數 “-display-error-details”推薦加上，方便出錯時能了解到更詳盡的信息。其他主要參數：
$ webpack --config XXX.js //使用另一份配置文件（比如webpack.config2.js）來打包
$ webpack --watch //監(jiān)聽變動并自動打包
$ webpack -p //壓縮混淆腳本，這個非常非常重要！
$ webpack -d //生成map映射文件，告知哪些模塊被最終打包到哪里了
-p是很重要的參數，曾經一個未壓縮的 700kb 的文件，壓縮后直接降到 180kb（主要是樣式這塊一句就獨占一行腳本，導致未壓縮腳本變得很大）。
五、模塊引入：
1、在HTML頁面引入：引入webpack最終生成的腳本即可：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<script src="dist/js/page/common.js"></script>
<script src="dist/js/page/index.js"></script>
</body>
</html>
可以看到我們連樣式都不用引入，畢竟腳本執(zhí)行時會動態(tài)生成style并標簽打到head里。
2、JS引入：各腳本模塊可以使用common.js來書寫，并可以直接引入未經編譯的模塊，比如：jsx，coffee，sass，只要在webpack.config.js中配置好了對應的加載器就行。
編譯頁面的入口文件：
require('../../css/reset.scss'); //加載初始化樣式
require('../../css/allComponent.scss'); //加載組件樣式
var React = require('react');
var AppWrap = require('../component/AppWrap'); //加載組件
var createRedux = require('redux').createRedux;
var Provider = require('redux/react').Provider;
var stores = require('AppStore');
var redux = createRedux(stores);
var App = React.createClass({
render: function() {
return (
<Provider redux={redux}>
{function() { return <AppWrap />; }}
</Provider>
);
}
});
React.render(
<App />, document.body
);
其他：
1、shimming ：
在 AMD/CMD 中，我們需要對不符合規(guī)范的模塊（比如一些直接返回全局變量的插件）進行 shim 處理，這時候我們需要使用 exports-loader 來幫忙：
{ test: require.resolve(“./src/js/tool/swipe.js”), loader: “exports?swipe”}
之后在腳本中需要引用該模塊的時候，這么簡單地來使用就可以了：
require(‘./tool/swipe.js’);
swipe();
2、自定義公共模塊提取：
在文章開始我們使用了 CommonsChunkPlugin 插件來提取多個頁面之間的公共模塊，并將該模塊打包為 common.js 。
但有時候我們希望能更加個性化一些，我們可以這樣配置：
var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
entry: {
p1: "./page1",
p2: "./page2",
p3: "./page3",
ap1: "./admin/page1",
ap2: "./admin/page2"
},
output: {
filename: "[name].js"
},
plugins: [
new CommonsChunkPlugin("admin-commons.js", ["ap1", "ap2"]),
new CommonsChunkPlugin("commons.js", ["p1", "p2", "admin-commons.js"])
]
};
// <script>s required:
// page1.html: commons.js, p1.js
// page2.html: commons.js, p2.js
// page3.html: p3.js
// admin-page1.html: commons.js, admin-commons.js, ap1.js
// admin-page2.html: commons.js, admin-commons.js, ap2.js
3、獨立打包樣式：
有時候可能希望項目的樣式能不要被打包到腳本中，而是獨立出來作為.css，然后在頁面中以標簽引入。這時候我們需要 extract-text-webpack-plugin 來幫忙：
var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
plugins: [commonsPlugin, new ExtractTextPlugin("[name].css")],
entry: {
//...省略其它配置
最終 webpack 執(zhí)行后會乖乖地把樣式文件提取出來：
4、使用CDN遠程文件：
有時候我們希望某些模塊走CDN并以<script>的形式掛載到頁面上來加載，但又希望能在 webpack 的模塊中使用上。
這時候我們可以在配置文件里使用 externals 屬性來幫忙：
{
externals: {
// require("jquery") 是引用自外部模塊的
// 對應全局變量 jQuery
"jquery": "jQuery"
}
}
需要留意的是，得確保 CDN 文件必須在 webpack 打包文件引入之前先引入。
我們倒也可以使用 script.js 在腳本中來加載我們的模塊：
var $script = require("scriptjs");
$script("http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
$('body').html('It works!')
});
5、與grunt/gulp相結合：
gulp.task("webpack", function(callback) {
// run webpack
webpack({
// configuration
}, function(err, stats) {
if(err) throw new gutil.PluginError("webpack", err);
gutil.log("[webpack]", stats.toString({
// output options
}));
callback();
});
});
當然我們只需要把配置寫到 webpack({ … }) 中去即可，無須再寫 webpack.config.js 了。
