摘要：簡介是一款加載器兼容打包工具。所有的靜態資源都可以是模塊引用，而不僅僅是文件了。便捷開發，能夠替代部分的的工作。擴展性強，插件機制完善。核心概念一個可執行模塊或庫的入口文件。插件，用于擴展的功能，在構建生命周期的節點上加入擴展為加入功能。

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

特點

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

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

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

擴展性強，插件機制完善。

僅需要對應的加載器即可支持，配置簡單，關注文件依賴關系

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

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

從啟動webpack構建到輸入結果經歷了一系列過程：

解析webpack配置參數，合并從shell傳入webpack.config.js文件里配置的參數，生產最后的配置結果

注冊所有配置的插件，好讓插件監聽webpack構建生命周期的事件節點，以做出對應的反應

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

在解析文件遞歸的過程中根據文件類型和loader配置找出合適的loader用來對文件進行轉換

遞歸完后得到每個文件的最后總結果，根據entry配置生成代碼塊chunk

輸出所有chunk到文件系統

注意，在構建生命周期中有一系列插件在合適的時機做了合適的事情，比如UglifyJsPlugin會在loader轉換遞歸完后對結果再使用UglifyJs壓縮覆蓋之前的結果。

webpack.config.js

配置說明：

plugins 插件項

entry 頁面入口文件

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

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

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

Node API 使用：

var webpack = require("webpack");

默認使用當前目錄的webpack.config.js 作為配置文件。可以根據不同的需求配置不同的config

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

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

在 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 文件所在目錄指令有效

公共文件提取

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

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

有用的配置項

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

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

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

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

對應各種不同的資源，需要有各自的loader

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

文件配置： 通過正則表達式對文件名進行匹配.

對于不同的模塊有其對應的模塊加載器，它們可以進行串聯

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");    

不同規范的模塊加載實現 ( AMD、CommonJS、ES6 )

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

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

webpack 內部實現命令不同

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

可以把開發文件在瀏覽器中顯示，便于調試

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

webpack-dev-server

生成一個開發使用的服務器，在文件有變化的時候，自動打包。有文件的熱替換的功能

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

react 項目基礎搭建

需要的工具

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 方式直接引用靜態文件
CSS 被轉化為style標簽

require("./myapp.less");

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

console.log(myapp);

使用rquire方式直接引用靜態文件
url-loader可以幫助實現圖片的封裝打包，也可以通過require實現
圖片可能被轉化成 base64格式的dataUrl

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

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

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

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

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

webpack-dev-server 開發服務器

利用Express開發靜態，時時刷新.

基于Node Express框架的輕量級開發服務器
靜態資源Web服務器
開發中會監聽文件的變化實時打包對于簡單靜態頁面或者僅僅依賴于獨立服務的前端頁面，都可以直接使用這個開發服務器進行開發

Webpack開發服務器需要多帶帶安裝

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(),         //獲取項目入口js文件
    output: {
        path: path.join(__dirname, "dist/js/"), //文件輸出目錄
        publicPath: "dist/js/",        //用于配置文件發布路徑，如CDN或本地服務器
        filename: "[name].js",        //根據入口文件輸出的對應多個文件名
    },
    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: {
        //配置別名，在項目中可縮減引用路徑
        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"
        }),
        //將公共代碼抽離出來合并為一個文件
        new CommonsChunkPlugin("common.js"),
        //js文件的壓縮
        new uglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ]
};