webpack是什么？

webpack將靜態(tài)資源稱之為模塊面哥。
webpack是一個(gè)模塊打包工具很魂，可以兼容多種js書寫規(guī)范，且可以處理模塊間的依賴關(guān)系咏瑟，具有更強(qiáng)大的js模塊化功能拂到。
webpack采用不同的loader加載不同的資源文件，打包生成多個(gè)js文件码泞，也可以根據(jù)設(shè)置生成獨(dú)立的圖片兄旬、CSS文件等。

webpack的作用

1余寥、解決項(xiàng)目中資源的多樣性和依賴性领铐；
2、處理js模塊規(guī)范復(fù)雜化+AMD宋舷、CommonJS绪撵、UMD、ES6等肥缔；使用requireJS主要用來處理AMD規(guī)范的js文件莲兢，若使用CommonJS規(guī)范的js庫文件，需要進(jìn)行AMD規(guī)范的封裝续膳，才能正常使用改艇。browserify主要處理CommonJS規(guī)范的文件。
3坟岔、解決開發(fā)與上線文件不一致性谒兄。

webpack特性

webpack具有requireJS和browserify的功能，但仍具有很多自己的新特性社付。
1承疲、對CommonJS、AMD鸥咖、ES6的語法做了兼容燕鸽；
2、對js啼辣、css啊研、圖片等資源都支持打包；
3、串聯(lián)式模塊加載器以及插件機(jī)制党远，讓其具有更好的靈活性和擴(kuò)展性削解；
4、有獨(dú)立的配置文件webpack.conf.js沟娱；
5氛驮、可以將代碼切割成不同的chunk，實(shí)現(xiàn)按需加載济似，降低了初始化時(shí)間矫废。
6、支持SourceUrls和SourceMaps碱屁，易于調(diào)試磷脯；
7、具有強(qiáng)大的Plugin接口娩脾，大多是內(nèi)部插件赵誓，使用起來比較靈活。
8柿赊、webpack使用異步IO并具有多級(jí)緩存俩功。這使得webpack很快且在增量編譯上更加快。

webpack的安裝

可全局npm模塊安裝碰声，也可以在當(dāng)前項(xiàng)目中安裝
npm install -g webpack
npm install --save-dev webpack

webpack的使用

1诡蜓、命令行使用：webpack <entry.js> <result.js> 其中entry.js是入口文件，result.js是打包后的輸出文件
2胰挑、node.js API使用：

var webpack = require('webpack');
webpack({
//configuration
}, function(err, stats){});

3蔓罚、默認(rèn)使用當(dāng)前目錄的webpack.config.js作為配置文件。如果要指定另外的配置文件瞻颂，可以執(zhí)行：

webpack --config webpack.custom.config.js

webpack常用命令

webpack的使用和browserify有些類似豺谈，下面列舉幾個(gè)常用命令：
1、webpack 最基本的啟動(dòng)webpack命令
2贡这、webpack -w 提供watch方法茬末，實(shí)時(shí)進(jìn)行打包更新
3、webpack -p 對打包后的文件進(jìn)行壓縮
4盖矫、webpack -d 提供SourceMaps丽惭，方便調(diào)試
5、webpack --colors 輸出結(jié)果帶彩色辈双，比如：會(huì)用紅色顯示耗時(shí)較長的步驟
6责掏、webpack --profile 輸出性能數(shù)據(jù)，可以看到每一步的耗時(shí)
7湃望、webpack --display-modules 默認(rèn)情況下 node_modules 下的模塊會(huì)被隱藏换衬，加上這個(gè)參數(shù)可以顯示這些被隱藏的模塊

前面的四個(gè)命令比較基礎(chǔ)局义，使用頻率會(huì)比較大，后面的命令主要是用來定位打包時(shí)間較長的原因冗疮，方便改進(jìn)配置文件，提高打包效率檩帐。

webpack的配置文件

項(xiàng)目中的靜態(tài)文件較多术幔，使用配置文件進(jìn)行打包會(huì)方便很多。最簡單的配置文件webpack.config.js如下所示：

module.exports = {
  entry:[
    './entry.js',
    ...
  ],
  output: {
    path: __dirname + '/output/',
    publicPath: "/output/",
    filename: 'result.js'
  }
};

其中entry參數(shù)定義了打包后的入口文件湃密，數(shù)組中的所有文件會(huì)打包生成一個(gè)filename文件
output參數(shù)定義了輸出文件的位置及名字诅挑，其中參數(shù)path是指文件的絕對路徑，publicPath是指訪問路徑泛源，filename是指輸出的文件名拔妥。

開發(fā)中需要將多個(gè)頁面的公用模塊獨(dú)立打包，從而可以利用瀏覽器緩存機(jī)制來提高頁面加載效率达箍，減少頁面初次加載時(shí)間没龙，只有當(dāng)某功能被用到時(shí)，才去動(dòng)態(tài)的加載缎玫。這就需要使用webpack中的CommonsChunkPlugin插件硬纤。具體配置如下：

var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");
module.exports = {
  entry: { a: "./a", b: "./b" },
  output: { filename: "[name].js" },
  plugins: [ new CommonsChunkPlugin("common.js") ]
}

在文件中根據(jù)下面的方式引用即可。

<script src="common.js"></script>
<script src="a.js"></script>
<script src="b.js"></script>

webpack模塊加載器

在webpack中JavaScript赃磨，CSS筝家，LESS，TypeScript邻辉，JSX溪王，CoffeeScript，圖片等靜態(tài)文件都是模塊值骇，不同模塊的加載是通過模塊加載器（webpack-loader）來統(tǒng)一管理的莹菱。loaders之間是可以串聯(lián)的，一個(gè)加載器的輸出可以作為下一個(gè)加載器的輸入雷客，最終返回到JavaScript上芒珠。loader的配置可以寫在配置文件中，通過正則表達(dá)式的方式對文件進(jìn)行匹配搅裙，具體可參見下面的示例：

module: {
    loaders: [{
        test: /\.less/,
        loader:  'style-loader!css-loader!less-loader'
    }, {
      test: /\.(png|jpg)$/,
      loader: 'url-loader?limit=10000&name=build/[name].[ext]'
    }]
}

loader也支持在js文件中通過require的方式進(jìn)行加載皱卓，只需要在require資源path的前面指定loader，用部逮！來串聯(lián)不同的loader和資源即可娜汁。

require(“style!css!less!./mystyles.less”);

css文件獨(dú)立打包

在webpack中編寫js文件時(shí)，可以通過require的方式引入其他的靜態(tài)資源兄朋，可通過loader對文件自動(dòng)解析并打包文件掐禁。通常會(huì)將js文件打包合并，css文件會(huì)在頁面的header中嵌入style的方式載入頁面。但開發(fā)過程中我們并不想將樣式打在腳本中傅事，最好可以獨(dú)立生成css文件缕允，以外鏈的形式加載。這時(shí)extract-text-webpack-plugin插件可以幫我們達(dá)到想要的效果蹭越。需要使用npm的方式加載插件障本，然后參見下面的配置，就可以將js中的css文件提取响鹃，并以指定的文件名來進(jìn)行加載驾霜。

 npm install extract-text-webpack-plugin –save-dev

plugins: [
    new ExtractTextPlugin('styles.css')
]

圖片打包

webpack中對于圖片的處理，可以通過url-loader來實(shí)現(xiàn)圖片的壓縮买置。

div.img{
    background: url(../image/xxx.jpg)
}
//或者
var img = document.createElement("img");
img.src = require("../image/xxx.jpg");
document.body.appendChild(img);

針對上面的兩種使用方式粪糙，loader可以自動(dòng)識(shí)別并處理。根據(jù)loader中的設(shè)置忿项，webpack會(huì)將小于指定大小的文件轉(zhuǎn)化成 base64 格式的 dataUrl蓉冈，其他圖片會(huì)做適當(dāng)?shù)膲嚎s并存放在指定目錄中。

module: {
    {
      test: /\.(png|jpg)$/,
      loader: 'url-loader?limit=10000&name=build/[name].[ext]'
    }]
}

對于上面的配置倦卖，如果圖片資源小于10kb就會(huì)轉(zhuǎn)化成 base64 格式的 dataUrl洒擦，其他的圖片會(huì)存放在build/文件夾下。

webpack-dev-server 靜態(tài)資源服務(wù)器

webpack除了可以對模塊進(jìn)行打包怕膛，還提供了一個(gè)開發(fā)服務(wù)器熟嫩。它的特點(diǎn)是：

• 基于Node.js Express框架的輕量開發(fā)服務(wù)器
• 靜態(tài)資源Web服務(wù)器
• 開發(fā)中會(huì)監(jiān)聽文件的變化在內(nèi)存中實(shí)時(shí)打包

webpack-dev-server需要單獨(dú)安裝，命令如下：

npm install -g webpack-dev-server

可以使用webpack-dev-server直接啟動(dòng)褐捻，也可以增加參數(shù)來獲取更多的功能掸茅，具體配置可以參見官方文檔。默認(rèn)啟動(dòng)端口8080柠逞，通過localhost:8080/webpack-dev-server/可以訪問頁面昧狮，文件修改后保存時(shí)會(huì)在頁面頭部看到sever的狀態(tài)變化，并且會(huì)進(jìn)行熱替換板壮，實(shí)現(xiàn)頁面的自動(dòng)刷新逗鸣。

雙服務(wù)器模式

項(xiàng)目開發(fā)中，僅有一臺(tái)靜態(tài)服務(wù)器是不能滿足需求的绰精，我們需要另啟一臺(tái)web服務(wù)器撒璧，且將靜態(tài)服務(wù)器集成到web服務(wù)器中，就可以使用webpack的打包和加載功能笨使。我們只需要修改一下配置文件就可以實(shí)現(xiàn)服務(wù)器的集成卿樱。

 entry: [
    './src/page/main.js',
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://127.0.0.1:8080'
  ]
  output: {
    path: __dirname,
    filename: '[name].js',
    publicPath: "http://127.0.0.1:8080/assets/"
  }
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]

如果在開發(fā)中啟動(dòng)兩個(gè)服務(wù)器并不是一個(gè)很好地選擇，webpack提供了一個(gè)中間件webpack-dev-middleware硫椰，但其只能在生產(chǎn)環(huán)境中使用繁调，可以實(shí)現(xiàn)在內(nèi)存中實(shí)時(shí)打包生成虛擬文件萨蚕，供瀏覽器訪問以及調(diào)試。使用方式如下：

var webpackDevMiddleware = require("webpack-dev-middleware");
var webpack = require("webpack");

var compiler = webpack({
    // configuration
    output: { path: '/' }
});

app.use(webpackDevMiddleware(compiler, {
    // options
}));