版本：v3，配置項(xiàng)參考中文文檔，任意webpack相關(guān)配置項(xiàng)均可直接輸入搜索

一個(gè)結(jié)合react的簡(jiǎn)單實(shí)例：點(diǎn)此處進(jìn)入

package.json

npm init生成即可，詳見(jiàn)node相關(guān)中的幾篇小雜記。script內(nèi)容如下：

package.json

webpack.config.js

上圖script中，build值為"webpack"，會(huì)直接讀取命名為webpack.config.js中的配置，若為其他命名則需對(duì)應(yīng)到具體地址。

webpack最簡(jiǎn)單的配置

1.Entry（入口起點(diǎn)）

@單入口起點(diǎn)

用法：entry: string|Array（示例為單入口起點(diǎn)的對(duì)象語(yǔ)法，詳見(jiàn)webpack中文文檔入口起點(diǎn)）

@多入口起點(diǎn)

見(jiàn)webpack基礎(chǔ)搭建二

備注：path的幾個(gè)簡(jiǎn)單用法；變量__dirname可獲取當(dāng)前模塊文件所在目錄的完整絕對(duì)路徑

2.Output（輸出）

filename是用于輸出文件的文件名，目標(biāo)輸出目錄?path?的絕對(duì)路徑。

上圖的配置結(jié)合entry及output的用法，可解釋為，將項(xiàng)目入口為app/main.js的內(nèi)容輸出到build下命名為index.js（會(huì)自動(dòng)創(chuàng)建）的文件中

3.resolve（解析）

詳見(jiàn)中文文檔resolve，此處僅介紹extensions：值為array類型

注意：v3版本中，array中若第一個(gè)值展示空數(shù)組，需空格：[' ','.js','.jsx']

extensions用法

4. module（模塊）

選項(xiàng)決定了如何處理項(xiàng)目中的不同類型的模塊，中文文檔

此處僅介紹rules：

值為array（一系列規(guī)則）

每個(gè)規(guī)則可以分為三部分 - 條件(condition)，結(jié)果(result)和嵌套規(guī)則(nested rule)。

條件

結(jié)果

5.loaders（加載器）

用于對(duì)模塊的源代碼進(jìn)行轉(zhuǎn)換，中文文檔Loaders。簡(jiǎn)單介紹如下，V3版本用法如示例中的module。

loader 可以使你在?import?或"加載"模塊時(shí)預(yù)處理文件。因此，loader 類似于其他構(gòu)建工具中“任務(wù)(task)”，并提供了處理前端構(gòu)建步驟的強(qiáng)大方法。loader 可以將文件從不同的語(yǔ)言（如 TypeScript）轉(zhuǎn)換為 JavaScript，或?qū)?nèi)聯(lián)圖像轉(zhuǎn)換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中?import?CSS文件！

Loader有三種使用方式

配置（推薦）：在?webpack.config.js?文件中指定 loader（示例使用的方法）。

內(nèi)聯(lián)：在每個(gè)?import?語(yǔ)句中顯式指定 loader。

內(nèi)聯(lián)loader

CLI：在 shell 命令中指定它們。（此處不多介紹）

babel-loader

中文文檔參考