webpack是前端資源模塊化管理和打包工具，在某種程度上來(lái)說(shuō)，是專門(mén)為前端開(kāi)發(fā)量身打造的。在webpack出現(xiàn)之前，也有一些模塊打包工具，但是功能都比較單一，在前端工程化的形勢(shì)下，一個(gè)既能處理JS又能處理其他資源的模塊打包工具顯得尤為重要。它的目的就是把依賴關(guān)系的各種文件打包成一系列的靜態(tài)資源，通過(guò) loader 的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、 LESS 等。
下面主要以webpack.config文件為例，分析一下webpack的架構(gòu)。

module.exports =  {
        context: process.cwd(),
        watch: true,
        entry: './index.js',
        devtool: 'source-map',
        output: {
            path: path.resolve(process.cwd(),'dist/'),
            filename: '[name].js'
        },
        resolve: {
            root: '/pomy/github/flux-example/src',
            extensions: ['', '.js', '.json', '.scss'],
            alias:{ jquery: 'src/lib/jquery.js', }
        },
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                _: 'underscore',
                React: 'react'
            }),
            new WebpackNotifierPlugin()
        ],
        module: {
            loaders: [{
                test: /\.js[x]?$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },  {
                test: /\.less$/,
                loaders:['style-loader', 'css-loader','less-loader']
            }, {
                test: /\.(png|jpg|gif|woff|woff2|ttf|eot|svg|swf)$/,
                loader: "file-loader?name=[name]_[sha512:hash:base64:7].[ext]"
            }, {
                test: /\.html/,
                loader: "html-loader?" + JSON.stringify({minimize: false })
            } ]
        }
    };

一、context

process.cwd()是nodejs的啟動(dòng)目錄，確定了webpack的編譯上下文。
webpack在確定webpack.config中entry的路徑依賴時(shí)，會(huì)根據(jù)context來(lái)確定要編譯文件的絕對(duì)路徑。

二、watch

在文件改變的時(shí)候，讓webpack動(dòng)態(tài)更新。

三、entry

entry定義的是webpack編譯的入口文件，可以是字符串或數(shù)組或者是對(duì)象。如果是數(shù)組，數(shù)組中的所有文件會(huì)打包生成一個(gè)filename文件；如果是對(duì)象，可以將不同的文件構(gòu)建成不同的文件。

四、devtool

資源映射表，debug的時(shí)候編譯的是原文件，而不是打包的文件，方便調(diào)試。

五、output

output參數(shù)是個(gè)對(duì)象，編譯的終點(diǎn)。
path：代表打包文件存放的絕對(duì)路徑。
filename：代表打包后的文件名。
當(dāng)多個(gè)bundle輸出的時(shí)候，filename中的name代表的是key/value（entry中）的key。

多個(gè)bundle輸出

六、resolve

• root
  絕對(duì)路徑，查找module是這里開(kāi)始查找。
• extensions
  自動(dòng)擴(kuò)展文件后綴名，意味著我們r(jià)equire模塊可以省略不寫(xiě)后綴名。
• alias
  resolve.alias是對(duì)module模塊提供別名，能夠讓開(kāi)發(fā)者指定一些模塊的引用路徑。比方說(shuō)，對(duì)于經(jīng)常要被import或者require的庫(kù)，如react，最好可以指定位置，有助于webpack打包優(yōu)化。關(guān)于webpack打包優(yōu)化后面需要另外專門(mén)介紹。

七、plugins

插件可以對(duì)每次build的結(jié)果進(jìn)行處理，可以完成更多 loader 不能完成的功能。
社區(qū)上的plugins列表

八、module

webpack中所有的資源都是模塊，不同模塊的加載是通過(guò)模塊加載器（webpack-loader）來(lái)統(tǒng)一管理的。loaders之間是可以串聯(lián)的，一個(gè)加載器的輸出可以作為下一個(gè)加載器的輸入，最終返回到JavaScript上。

給css和less還有圖片添加了loader之后，我們不僅可以 require() js文件，還可以 require() css、less甚至圖片文件。