【webpack】配置

配 置|webpack中文網

使用不一樣語言配置js/ts/coffee：

• 爲了用 TypeScript 書寫 webpack 的配置文件，必須先安裝相關依賴：

npm install --save-dev typescript ts-node @types/node @types/webpack
複製代碼

• 相似的，爲了使用 CoffeeScript 來書寫配置文件, 一樣須要安裝相關的依賴：

npm install --save-dev coffee-script
複製代碼

---

module.exports導出爲多種類型：

---

output

---

module--rule--loader

module主要是根據rule（規則）來配置loader（插件）

---

解析resolve

中文官網：解析(resolve)

webpack在啓動後會從配置的入口模塊觸發找出全部依賴的模塊，Resolve配置webpack如何尋找模塊對應的文件。webpack內置JavaScript模塊化語法解析功能，默認會採用模塊化標準里約定好的規則去尋找，但你能夠根據本身的須要修改默認的規則。

下面介紹幾個經常使用的配置項

1.alias：配置項經過別名來把原導入路徑映射成一個新的導入路徑。

• 例如使用如下配置：

resolve:{
  alias:{
    components: './src/components/'
  }
}
複製代碼

• 當你經過 import Button from 'components/button' 導入時，實際上被 alias 等價替換成了 import Button from './src/components/button'
• 配置根目錄

resolve:{
  alias:{
    '@': resolve('src'),
  }
}
複製代碼

• 還有不少種配置方式，請參看官網

2.mainFields：有一些第三方模塊會針對不一樣環境提供幾分代碼。 例如分別提供採用 ES5 和 ES6 的2份代碼，這2份代碼的位置寫在package.json文件裏，以下：

{
  // 採用 ES6 語法的代碼入口文件
  "jsnext:main": "es/index.js",
  // 採用 ES5 語法的代碼入口文件
  "main": "lib/index.js" 
}
複製代碼

• Webpack 會根據mainFields 的配置去決定優先採用那份代碼，mainFields 默認以下：

mainFields: ['browser', 'main']
複製代碼

• Webpack 會按照數組裏的順序去 package.json 文件裏尋找，只會使用找到的第一個。
• 假如你想優先採用 ES6 的那份代碼，能夠這樣配置：

mainFields: ['jsnext:main', 'browser', 'main']
複製代碼

3.extensions：在導入語句沒帶文件後綴時，Webpack 會自動帶上後綴後去嘗試訪問文件是否存在。 resolve.extensions 用於配置在嘗試過程當中用到的後綴列表，默認是：

extensions: ['.js', '.json']
複製代碼

• 也就是說當遇到 require('./data') 這樣的導入語句時，Webpack 會先去尋找 ./data.js 文件，若是該文件不存在就去尋找 ./data.json 文件， 若是仍是找不到就報錯。
• 假如你想讓 Webpack 優先使用目錄下的 TypeScript 文件，能夠這樣配置：

extensions: ['.ts', '.js', '.json']
複製代碼

4.modules：resolve.modules 配置 Webpack 去哪些目錄下尋找第三方模塊，默認是隻會去 node_modules 目錄下尋找。

• 有時你的項目裏會有一些模塊會大量被其它模塊依賴和導入，因爲其它模塊的位置分佈不定，針對不一樣的文件都要去計算被導入模塊文件的相對路徑，這個路徑有時候會很長，就像這樣 import '../../../components/button' 這時你能夠利用 modules 配置項優化，假如那些被大量導入的模塊都在 ./src/components 目錄下，把 modules 配置成

modules:['./src/components','node_modules']
複製代碼

• 後，你能夠簡單經過 import 'button' 導入。

5.descriptionFiles： resolve.descriptionFiles 配置描述第三方模塊的文件名稱，也就是 package.json 文件。默認以下：

descriptionFiles: ['package.json']
複製代碼

6.enforceExtension：若是配置爲 true 全部導入語句都必需要帶文件後綴， 例如開啓前 import './foo' 能正常工做，開啓後就必須寫成 import './foo.js'

7.enforceModuleExtension：和 enforceExtension 做用相似，但它只對 node_modules 下的模塊生效。

• 一般搭配 enforceExtension 使用，在 enforceExtension:true 時，由於安裝的第三方模塊中大多數導入語句沒帶文件後綴， 因此這時經過配置 enforceModuleExtension:false 來兼容第三方模塊。

---

插件plugins

---

devServer

webpack-dev-server 可以用於快速開發應用程序

下面就proxy作個解釋：

• 假設你主機名爲 localhost:8080 , 請求 API 的 url 是 http://your_api_server.com/user/list
• '/proxy'：若是點擊某個按鈕，觸發請求 API 事件，這時請求 url 是http://localhost:8080/proxy/user/list 。
• changeOrigin：若是 true ，那麼 http://localhost:8080/proxy/user/list 變爲 http://your_api_server.com/proxy/user/list 。但還不是咱們要的 url 。
• pathRewrite：重寫路徑。匹配 /proxy ，而後變爲''，那麼 url 最終爲 http://your_api_server.com/user/list 。

---

devtool

此選項控制是否生成，以及如何生成 source map。

7中SourceMap模式

模式	解釋
eval	每一個module會封裝到 eval 裏包裹起來執行，而且會在末尾追加註釋 //@ sourceURL.
source-map	生成一個SourceMap文件.
hidden-source-map	和 source-map 同樣，但不會在 bundle 末尾追加註釋.
inline-source-map	生成一個 DataUrl 形式的 SourceMap 文件.
eval-source-map	每一個module會經過eval()來執行，而且生成一個DataUrl形式的SourceMap
cheap-source-map	生成一個沒有列信息（column-mappings）的SourceMaps文件，不包含loader的 sourcemap（譬如 babel 的 sourcemap）
cheap-module-source-map	生成一個沒有列信息（column-mappings）的SourceMaps文件，同時 loader 的 sourcemap 也被簡化爲只包含對應行的。

- 注1：webpack 不只支持這 7 種，
並且它們仍是能夠任意組合上面的eval、inline、hidden關鍵字，
就如文檔所說，你能夠設置 souremap 選項爲:
    cheap-module-inline-source-map。

- 注2：若是你的modules裏面已經包含了SourceMaps，
你須要用source-map-loader 來和合並生成一個新的 SourceMaps。
複製代碼

---

其餘配置

1. 構建目標(targets)告知 webpack 爲目標(target)指定一個環境。默認爲web：編譯爲類瀏覽器環境裏可用。
2. 監聽模式（watch）默認爲false；若爲true,則可配置watchOptions
3. 外部擴展(externals)：配置選項提供了「從輸出的 bundle 中排除依賴」；可將公共模塊如loadsh/jquery等配置在這裏
4. 性能(performance)：配置如何展現性能提示
5. 其餘......