Webpack附錄

檢察一切文檔頁面：
全棧開闢，獵取更多信息。

原文鏈接：
webpack道理，原文廣告模態框遮擋，瀏覽體驗不好，所以整頓成本文，輕易查找。

經常運用 Loaders

加載文件

• raw-loader：把文本文件的內容加載到代碼中去，在 3-20加載SVG 中有引見。
• file-loader：把文件輸出到一個文件夾中，在代碼中經由過程相對 URL 去援用輸出的文件，在 3-19加載圖片、3-20加載 SVG、4-9 CDN 加快 中有引見。
• url-loader：和 file-loader 相似，然則能在文件很小的情況下以 base64 的體式格局把文件內容注入到代碼中去，在 3-19加載圖片、3-20加載 SVG 中有引見。
• source-map-loader：加載分外的 Source Map 文件，以輕易斷點調試，在 3-21加載 Source Map 中有引見。
• svg-inline-loader：把緊縮后的 SVG 內容注入到代碼中，在 3-20加載 SVG 中有引見。
• node-loader：加載 Node.js 原生模塊 .node 文件。
• image-loader：加載而且緊縮圖片文件。
• json-loader：加載 JSON 文件。
• yaml-loader：加載 YAML 文件。

編譯模版

• pug-loader：把 Pug 模版轉換成 JavaScript 函數返回。
• handlebars-loader：把 Handlebars 模版編譯成函數返回。
• ejs-loader：把 EJS 模版編譯成函數返回。
• haml-loader：把 HAML 代碼轉換成 HTML。
• markdown-loader：把 Markdown 文件轉換成 HTML。

轉換腳本言語

• babel-loader：把 ES6 轉換成 ES5，在 3-1運用 ES6 言語 中有引見。
• ts-loader：把 TypeScript 轉換成 JavaScript，在3-2運用 TypeScript 言語中有碰到。
• awesome-typescript-loader：把 TypeScript 轉換成 JavaScript，機能要比 ts-loader 好。
• coffee-loader：把 CoffeeScript 轉換成 JavaScript。

轉換款式文件

• css-loader：加載 CSS，支撐模塊化、緊縮、文件導入等特徵。
• style-loader：把 CSS 代碼注入到 JavaScript 中，經由過程 DOM 操縱去加載 CSS。
• sass-loader：把 SCSS/SASS 代碼轉換成 CSS，在3-4運用 SCSS 言語中有引見。
• postcss-loader：擴大 CSS 語法，運用下一代 CSS，在3-5運用 PostCSS中有引見。
• less-loader：把 Less 代碼轉換成 CSS 代碼。
• stylus-loader：把 Stylus 代碼轉換成 CSS 代碼。

搜檢代碼

• eslint-loader：經由過程 ESLint 搜檢 JavaScript 代碼，在 3-16搜檢代碼中有引見。
• tslint-loader：經由過程 TSLint 搜檢 TypeScript 代碼。
• mocha-loader：加載 Mocha 測試用例代碼。
• coverjs-loader：盤算測試覆蓋率。

別的

• vue-loader：加載 Vue.js 單文件組件，在3-7運用 Vue 框架中有引見。
• i18n-loader：加載多言語版本，支撐國際化。
• ignore-loader：疏忽掉部份文件，在3-11構建同構運用中有引見。
• ui-component-loader：按需加載 UI 組件庫，例如在運用 antd UI 組件庫時，不會由於只用到了 Button 組件而打包進一切的組件。

經常運用 Plugins

用於修正行動

• define-plugin：定義環境變量，在4-7辨別環境中有引見。
• context-replacement-plugin：修正 require 語句在尋覓文件時的默許行動。
• ignore-plugin：用於疏忽部份文件。

用於優化

• commons-chunk-plugin：提取大眾代碼，在4-11提取大眾代碼中有引見。
• extract-text-webpack-plugin：提取 JavaScript 中的 CSS 代碼到零丁的文件中，在1-5運用 Plugin 中有引見。
• prepack-webpack-plugin：經由過程 Facebook 的 Prepack 優化輸出的 JavaScript 代碼機能，在 4-13運用 Prepack 中有引見。
• uglifyjs-webpack-plugin：經由過程 UglifyES 緊縮 ES6 代碼，在 4-8緊縮代碼中有引見。
• webpack-parallel-uglify-plugin：多歷程實行 UglifyJS 代碼緊縮，提拔構建速率。
• imagemin-webpack-plugin：緊縮圖片文件。
• webpack-spritesmith：用插件製造雪碧圖。
• ModuleConcatenationPlugin：開啟 Webpack Scope Hoisting 功用，在4-14開啟 ScopeHoisting中有引見。
• dll-plugin：自創 DDL 的頭腦大幅度提拔構建速率，在4-2運用 DllPlugin中有引見。
• hot-module-replacement-plugin：開啟模塊熱替代功用。

別的

• serviceworker-webpack-plugin：給網頁運用增添離線緩存功用，在3-14 構建離線運用中有引見。
• stylelint-webpack-plugin：集成 stylelint 到項目中，在3-16搜檢代碼中有引見。
• i18n-webpack-plugin：給你的網頁支撐國際化。
• provide-plugin：從環境中供應的全局變量中加載模塊，而不必導入對應的文件。
• web-webpack-plugin：輕易的為單頁運用輸出 HTML，比 html-webpack-plugin 好用。