webpack是一個(gè)前端模塊化方案，可以把開發(fā)中的所有資源（圖片、js文件、css文件等）都看成模塊，通過loader（加載器：加載所需的資源）和plugins（插件：對(duì)處理過的文件進(jìn)行整理）對(duì)資源進(jìn)行處理，打包成符合生產(chǎn)環(huán)境部署的前端資源

webpack架構(gòu)(webpack.config)

1.entry: 定義整個(gè)編譯過程的起點(diǎn)
2.output: 定義整個(gè)編譯過程的終點(diǎn)
3.module: 定義模塊module的處理方式
4.plugin 對(duì)編譯完成后的內(nèi)容進(jìn)行二度加工
5.resolve.alias 定義模塊的別名

webpack的核心module

無論你是jsx,tsx,html,css,scss,less,png文件，webpack視為module。并且每個(gè)文件module都會(huì)經(jīng)過相同的編譯工序 loader==> plugin。
關(guān)于以上這點(diǎn)，以如下一個(gè)簡單的webpack.config文件為例。看下webpack會(huì)做什么

module.exports =  {
        watch: true,
        entry: './index.js',
        devtool: 'source-map',
        output: {
            path: path.resolve(process.cwd(),'dist/'),
            filename: '[name].js'
        },
        resolve: {
            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 })
            } ]
        }
    };

webpack是如何處理如上webpack.config文件解析:

1. 確定webpack編譯上下文context

默認(rèn)情況下就是node啟動(dòng)的工作目錄process.cwd()(取當(dāng)前工作目錄（Current Work Directory），這個(gè)不同于“腳本所在目錄”。如果你是通過命令行調(diào)用的，那么就應(yīng)該是入口腳本的目錄；如果是通過其他進(jìn)程調(diào)用的會(huì)繼承下來。)，當(dāng)然也可以在配置中手動(dòng)指定context。
webpack在確定webpack.config中entry的路徑依賴時(shí)，會(huì)根據(jù)這個(gè)context確定每個(gè)要編譯的文件(assets)的絕對(duì)路徑。

2. entry和output 確定webpack的編譯起點(diǎn)和終點(diǎn)

顧名思義，entry定義webpack編譯起點(diǎn)，入口模塊。 對(duì)應(yīng)的結(jié)果為compolation.assets
output定義webpack編譯的終點(diǎn)，導(dǎo)出目錄

編寫webpack 插件(Compiler 和 Compilation):https://zhuanlan.zhihu.com/p/20929843?refer=jscss

3. module.loaders 和 module.test 確定模塊預(yù)編譯處理方式

以babel為例，當(dāng)webpack發(fā)現(xiàn)模塊名稱匹配test中的正則/js[x]?的時(shí)候。

• 它會(huì)將當(dāng)前模塊作為參數(shù)傳入babel函數(shù)處理，babel([當(dāng)前模塊資源的引用])。
• 函數(shù)執(zhí)行的結(jié)果將會(huì)緩存在webpack的compilation對(duì)象上，并分配唯一的id 。
• 以上的這一步，非常非常關(guān)鍵。唯一的id值決定了webpack在最后的編譯結(jié)果中，是否會(huì)存在-重復(fù)代碼。
• 而緩存在compilation對(duì)象上，則決定了webpack可以在plugin階段直接拿取模塊資源進(jìn)行二度加工。

4. plugin階段貫穿于webpack的整個(gè)編譯流程，一般用來做一些優(yōu)化操作。

比如webpack.ProvidePlugin，它會(huì)在對(duì)編譯結(jié)果再加工的操作過程中進(jìn)行自定義的變量注入，當(dāng)模塊中碰到比如這個(gè)變量的時(shí)候，webpack將從緩存的module中取出underscore模塊加載進(jìn)引用的文件(compilation.assets)。
比如WebpackNotifierPlugin，它會(huì)在編譯結(jié)果ready的時(shí)通知開發(fā)者，output已經(jīng)就緒。

5. resolve.alias的作用就是對(duì)module模塊提供別名，并沒有什么特殊的。

創(chuàng)建 import 或 require 的別名，來確保模塊引入變得更簡單。
例如，一些位于 src/ 文件夾下的常用模塊：

alias: {
  Utilities: path.resolve(__dirname, 'src/utilities/'),
  Templates: path.resolve(__dirname, 'src/templates/')
}

現(xiàn)在，替換「在導(dǎo)入時(shí)使用相對(duì)路徑」這種方式，就像這樣：

import Utility from '../../utilities/utility';

你可以這樣使用別名：

import Utility from 'Utilities/utility';

也可以在給定對(duì)象的鍵后的末尾添加 $，以表示精準(zhǔn)匹配：

alias: {
  xyz$: path.resolve(__dirname, 'path/to/file.js')
}

這將產(chǎn)生以下結(jié)果：

import Test1 from 'xyz'; // 精確匹配，所以 path/to/file.js 被解析和導(dǎo)入
import Test2 from 'xyz/file.js'; // 精確匹配，觸發(fā)普通解析

【副作用】 webpack編譯過程中的電腦卡慢？

• 在weback經(jīng)歷以上流程的時(shí)候，查看你的內(nèi)存，你會(huì)發(fā)現(xiàn)，內(nèi)存飆升！！！
• 這一般都是loader階段，對(duì)DSL進(jìn)行AST抽象語法樹分析的時(shí)候，由于大量應(yīng)用遞歸，內(nèi)存溢出的情況也是非常常見。
• output目錄不是一個(gè)漸進(jìn)的編譯目錄，只有在最后compilation結(jié)果ready的時(shí)候，才會(huì)寫入，造成開發(fā)者等待的時(shí)候，output目錄始終為空。

【webpack編譯對(duì)象compilation】 webpack將編譯結(jié)果導(dǎo)出到output是怎么做到的

• 如上，webpack在plugin結(jié)束前，將會(huì)在內(nèi)存中生成一個(gè)compilation對(duì)象文件模塊tree。
• 這個(gè)階段是webpack的done階段 : webpack寫入output目錄的分割點(diǎn)。
• 這棵樹的枝葉節(jié)點(diǎn)就是所有的module[由import或者require為標(biāo)志，并配備唯一moduleId],
• 這棵樹的主枝干就是所有的assets，也就是我們最后需要寫入到output.path文件夾里的文件內(nèi)容。
• 最后，這個(gè)compilation對(duì)象也是所有webpackPlugin的處理的時(shí)候的arguments。

總結(jié)

• 對(duì)于開發(fā)者來說，整體而言webpack的編譯過程細(xì)節(jié)比較多，但是大體的框架還是比較直觀。
• 里面涉及到的類似DSL，AST的概念及模塊緩存等等，在構(gòu)建工具中還是比較常見的，配合watch模式，debug模式，對(duì)于開發(fā)者來說實(shí)在是一大利器。
• 一切文件皆為模塊也和react的一切dom都可以變?yōu)镴S一樣，對(duì)前端世界帶來了新的開發(fā)理念。
  本文大部分引用：https://github.com/slashhuang/blog/issues/1
  webpack官方文檔