Webpack附錄

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 好用。