摘要：簡介是一款加載器兼容打包工具。所有的靜態(tài)資源都可以是模塊引用，而不僅僅是文件了。便捷開發(fā)，能夠替代部分的的工作。擴(kuò)展性強(qiáng)，插件機(jī)制完善。核心概念一個(gè)可執(zhí)行模塊或庫的入口文件。插件，用于擴(kuò)展的功能，在構(gòu)建生命周期的節(jié)點(diǎn)上加入擴(kuò)展為加入功能。

WebPack是一款加載器兼容打包工具。
可以處理各種資源：JS(JSX),coffee，less/sass，圖片等。
靜態(tài)資源打包工具
出色的前端自動化構(gòu)件化工具，模塊化工具，資源管理工具
兼容多種JavaScript書寫規(guī)范，具有更強(qiáng)大的JavaScript模塊化功能

特點(diǎn)

使用commonJs的形式書寫腳本。也對AMD，CMD的寫法支持。

所有的靜態(tài)資源都可以是模塊引用，而不僅僅是JavaScript文件了。

便捷開發(fā)，能夠替代部分的grunt/gulp的工作。

擴(kuò)展性強(qiáng)，插件機(jī)制完善。

僅需要對應(yīng)的加載器即可支持，配置簡單，關(guān)注文件依賴關(guān)系

工作原理：
把項(xiàng)目當(dāng)作一個(gè)整體，通過一個(gè)給定的主文件(如：app.js)，webpack將從這個(gè)文件開始找到項(xiàng)目中的所有依賴文件，通過loaders處理它們，打包為一個(gè)瀏覽器可以識別的JavaScript文件。

entry：一個(gè)可執(zhí)行模塊或庫的入口文件。
chunk：多個(gè)文件組成的一個(gè)代碼開，例如把一個(gè)可執(zhí)行模塊和它所有依賴的模塊組合和一個(gè)chunk。
loader：文件轉(zhuǎn)換器。
plugin：插件，用于擴(kuò)展webpack的功能，在webpack構(gòu)建生命周期的節(jié)點(diǎn)上加入擴(kuò)展hook為webpack加入功能。

從啟動webpack構(gòu)建到輸入結(jié)果經(jīng)歷了一系列過程：

解析webpack配置參數(shù)，合并從shell傳入webpack.config.js文件里配置的參數(shù)，生產(chǎn)最后的配置結(jié)果

注冊所有配置的插件，好讓插件監(jiān)聽webpack構(gòu)建生命周期的事件節(jié)點(diǎn)，以做出對應(yīng)的反應(yīng)

從配置的entry文件入口開始解析文件構(gòu)建AST語法樹，找出每個(gè)文件所依賴的文件，遞歸下去。

在解析文件遞歸的過程中根據(jù)文件類型和loader配置找出合適的loader用來對文件進(jìn)行轉(zhuǎn)換

遞歸完后得到每個(gè)文件的最后總結(jié)果，根據(jù)entry配置生成代碼塊chunk

輸出所有chunk到文件系統(tǒng)

注意，在構(gòu)建生命周期中有一系列插件在合適的時(shí)機(jī)做了合適的事情，比如UglifyJsPlugin會在loader轉(zhuǎn)換遞歸完后對結(jié)果再使用UglifyJs壓縮覆蓋之前的結(jié)果。

webpack.config.js

配置說明：

plugins 插件項(xiàng)

entry 頁面入口文件

output 對應(yīng)輸出項(xiàng)(即入口文件最終生成位置，名字)

modules.loaders 配置每一個(gè)種資源文件需要使用什么加載器來處理(多個(gè)loader之間使用"!" 連接)

webpack 啟動webpack的方法
webpack -p 發(fā)布環(huán)境編譯(壓縮代碼)，對打包后的文件進(jìn)行壓縮
webpack -w 提供watch方法，實(shí)時(shí)進(jìn)行進(jìn)行打包更新
webpack -d 提供source map,方便調(diào)試
webpack --config xx.js 以某個(gè)config作為打包，使用另外一份配置文件來打包(例如：webpack.config2.js)
webpack --help 更多的命令

Node API 使用：

var webpack = require("webpack");

默認(rèn)使用當(dāng)前目錄的webpack.config.js 作為配置文件。可以根據(jù)不同的需求配置不同的config

moudle.exports = {
    entry: [
        "./app/main.js"
    ],
    output: {
        path: __dirname + "/dist/",
        publicPath: "/dist/",
        filename: "bundle.js"
    }
}

其中entry參數(shù)定義了打包后的入口文件，數(shù)組中的所有文件會打包生成一個(gè)filename文件
output參數(shù)定義了輸出文件的位置

在 package.json 文件中配置

"scripts": {
    "dev": "webpack",
    "deploy": "webpack --config webpack.deploy.config.js",
    "test": "echo "Error: no test specified" && exit 1"
  }

可以使用 npm run dev 和 npm run deploy 指令.
需要在package.json 文件所在目錄指令有效

公共文件提取

使用了一個(gè) CommonsChunkPlugin 的插件，它用于提取多個(gè)入口文件的公共腳本部分，然后生成一個(gè)common.js 來方便多頁面之間進(jìn)行復(fù)用

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

有用的配置項(xiàng)

module.noParse 如果確定一個(gè)模塊中沒有其它依賴的，就可以配置這項(xiàng)，webpack將不再掃描這個(gè)文件中的依賴

module: {
    loaders: [{ test: /.css$/, loader: "style-loader"}],
    noParse: [/moment-with-locales/]
}

resolve.alias 別名.是Webpack 的一個(gè)配置項(xiàng)，它的作用是把用戶的一個(gè)請求重定向到另一個(gè)路徑 （理解成 302）

resolve: {
    extensions: [".js", ".less", ".css"],
    alias: {
        moment: "moment/min/moment-with-locales.min.js"
    }
}

對應(yīng)各種不同的資源，需要有各自的loader

模塊： 靜態(tài)的文件， 比如： JavaScript，CSS， LESS， TypeScript
JSX，CoffeeScript，圖片等等

文件配置： 通過正則表達(dá)式對文件名進(jìn)行匹配.

對于不同的模塊有其對應(yīng)的模塊加載器，它們可以進(jìn)行串聯(lián)

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

require() 還支持在資源path前面指定loader，即 require(![loaderslist]![source path]) 形式

require("style!css!less!./mystyles.less");    

不同規(guī)范的模塊加載實(shí)現(xiàn) ( AMD、CommonJS、ES6 )

CommonJS 的rqeuire函數(shù)則是同步加載 -- 使用require.ensure實(shí)現(xiàn)兼容
AMD是模塊異步加載并保證執(zhí)行順序 -- 使用require實(shí)現(xiàn)兼容
ES6中使用import實(shí)現(xiàn)模塊的引入 -- 使用Babel實(shí)現(xiàn)兼容

在Webpack中推薦CommonJS方法去加載模塊，這種方式語法更加簡潔直觀.

webpack 內(nèi)部實(shí)現(xiàn)命令不同

require.ensure(CommonJs); // 保證CommonJs順序

require.ensure(["module-a", "module-b"], function ( require ) {
    var a = require("module-a");    
    var b = require("module-b");
    // ...
});

require(AMD);

require(["module-a", "module-b"], function ( a, b ) {
    // ...
});

require.include(request);

require.ensure([], function( require ) {
    require.include("./file");
    require("./file2");
});   

sourcemap

可以把開發(fā)文件在瀏覽器中顯示，便于調(diào)試

module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  devtool: "source-map"
}

webpack-dev-server

生成一個(gè)開發(fā)使用的服務(wù)器，在文件有變化的時(shí)候，自動打包。有文件的熱替換的功能

webpack-dev-server --inline --hot // 文件自動打包， 模塊熱替換

react 項(xiàng)目基礎(chǔ)搭建

需要的工具

npm install babel-core babel-preset-es2015 babel-parset-react webpack webpack-dev-server babel-loader react-hot-loader --save-dev

npm install react react-dom --save-dev

多帶帶使用babel，需要安裝的工具

npm install babel-loader babel-core babel-preset-es2015 --save-dev

使用 require 方式直接引用靜態(tài)文件
CSS 被轉(zhuǎn)化為style標(biāo)簽

require("./myapp.less");

var myapp = require("./myapp.js");

console.log(myapp);

使用rquire方式直接引用靜態(tài)文件
url-loader可以幫助實(shí)現(xiàn)圖片的封裝打包，也可以通過require實(shí)現(xiàn)
圖片可能被轉(zhuǎn)化成 base64格式的dataUrl

div.img {
    background: url("../img/xxx.jpg");
}

// 或者
var img = document.createElement("img");
img.src = require("../image/xxx.jpg");
document.body.appendChild(img);

通常并不想把樣式打在腳本中，最好獨(dú)立生成CSS文件，在頁面中外鏈才好，這時(shí)可以使用插件extract-text-webpack-plugin --save-dev

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

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

webpack-dev-server 開發(fā)服務(wù)器

利用Express開發(fā)靜態(tài)，時(shí)時(shí)刷新.

基于Node Express框架的輕量級開發(fā)服務(wù)器
靜態(tài)資源Web服務(wù)器
開發(fā)中會監(jiān)聽文件的變化實(shí)時(shí)打包對于簡單靜態(tài)頁面或者僅僅依賴于獨(dú)立服務(wù)的前端頁面，都可以直接使用這個(gè)開發(fā)服務(wù)器進(jìn)行開發(fā)

Webpack開發(fā)服務(wù)器需要多帶帶安裝

npm install -g webpack-dev-server

啟動命令

webpack-dev-server --content-base build/ --hot

npm install html-webpack-plugin --save-dev    

new HtmlWebpackPlugin(),
new HtmlWebpackPlugin({
    template: "app/custom.html",
    filename: "custom.html",
    chunks: ["mobile"],
    inject: "body"    
})

module.exports = {
    devtool: "source-map",    
    entry: getEntry(),         //獲取項(xiàng)目入口js文件
    output: {
        path: path.join(__dirname, "dist/js/"), //文件輸出目錄
        publicPath: "dist/js/",        //用于配置文件發(fā)布路徑，如CDN或本地服務(wù)器
        filename: "[name].js",        //根據(jù)入口文件輸出的對應(yīng)多個(gè)文件名
    },
    module: {
        //各種加載器
        loaders: [{
                    test: /.css/,
                    loader: "style!css"
                }, {
                    test: /.(png!jpe?g)$/,
                    loader: "url-loader?limit=10240&name=build/[name].[ext]"
                }, {
                    test: /.jsx?$/,
                    loader: "babel-loader"
                }]
    },
    resolve: {
        //配置別名，在項(xiàng)目中可縮減引用路徑
        alias: {
            jquery: srcDir + "/js/lib/jquery.min.js",
            core: srcDir + "/js/core",
            ui: srcDir + "/js/ui"
        }
    },
    plugins: [
        //提供全局的變量，在模塊中使用無需用require引入
        new webpack.ProvidePlugin({
            jQuery: "jquery",
            $: "jquery",
            // nie: "nie"
        }),
        //將公共代碼抽離出來合并為一個(gè)文件
        new CommonsChunkPlugin("common.js"),
        //js文件的壓縮
        new uglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ]
};