loader · 前端

有三種使用 loader 的方式： * [配置](https://www.webpackjs.com/concepts/loaders/#configuration)（推薦）：在**webpack.config.js**文件中指定 loader。 * [內聯](https://www.webpackjs.com/concepts/loaders/#inline)：在每個`import`語句中顯式指定 loader。 * [CLI](https://www.webpackjs.com/concepts/loaders/#cli)：在 shell 命令中指定它們。這里我們只列舉配置的方法 ## **文件** * [`raw-loader`](https://www.webpackjs.com/loaders/raw-loader "npm install --save-dev raw-loader")加載文件原始內容（utf-8） * [`val-loader`](https://www.webpackjs.com/loaders/val-loader 'npm i -D val-loader')將代碼作為模塊執行，并將 exports 轉為 JS 代碼 * [`url-loader`](https://www.webpackjs.com/loaders/url-loader 'npm install --save-dev url-loader')像 file loader 一樣工作，但如果文件小于限制，可以返回[data URL](https://tools.ietf.org/html/rfc2397) * [`file-loader`](https://www.webpackjs.com/loaders/file-loader "npm install --save-dev file-loader")將文件發送到輸出文件夾，并返回（相對）URL * [`ref-loader`](https://www.npmjs.com/package/ref-loader "npm i ref-loader -D")在任何文件之間手動創建依賴關系【webpack5文檔新增】 ## **JSON** * [`json-loader`](https://www.webpackjs.com/loaders/json-loader "npm install --save-dev json-loader")加載[JSON](http://json.org/)文件（默認包含無需再次下載） * [`json5-loader`](https://www.webpackjs.com/loaders/json5-loader "npm install --save-dev json5-loader")加載和轉譯[JSON 5](https://json5.org/)文件 * `cson-loader`加載和轉譯[CSON](https://github.com/bevry/cson#what-is-cson)文件 ## **轉換編譯(Transpiling)** * [`script-loader`](https://www.webpackjs.com/loaders/script-loader "npm install --save-dev script-loader")在全局上下文中執行一次 JavaScript 文件（如在 script 標簽），不需要解析『webpack5文檔沒描述』 * [`babel-loader`](https://www.webpackjs.com/loaders/babel-loader "npm install -D babel-loader @babel/core @babel/preset-env webpack")js兼容處理；加載 ES2015+ 代碼，然后使用[Babel](https://babeljs.io/)轉譯為 ES5（推薦babel比buble和traceur優秀） * `buble-loader`使用[Bublé](https://buble.surge.sh/guide/)js兼容處理；加載 ES2015+ 代碼，并且將代碼轉譯為 ES5 * `traceur-loader`js兼容處理；加載 ES2015+ 代碼，然后使用[Traceur](https://github.com/google/traceur-compiler#readme)轉譯為 ES5 * [`ts-loader`](https://github.com/TypeStrong/ts-loader)或[`awesome-typescript-loader`](https://github.com/s-panferov/awesome-typescript-loader)：像 JavaScript 一樣加載[TypeScript](https://www.typescriptlang.org/)2.0+ * [`coffee-loader`](https://www.webpackjs.com/loaders/coffee-loader)像 JavaScript 一樣加載[CoffeeScript](http://coffeescript.org/) * [`fengari-loader`](https://github.com/fengari-lua/fengari-loader/)使用[fengari](https://fengari.io/)加載Lua代碼【webpack5文檔新增】 * [`elm-webpack-loader`](https://github.com/elm-community/elm-webpack-loader)像JavaScript一樣加載[Elm](https://elm-lang.org/)【webpack5文檔新增】 ## **模板(Templating)** * [`html-loader`](https://www.webpackjs.com/loaders/html-loader "npm i -D html-loader")導出 HTML 為字符串，需要引用靜態資源 * `pug-loader`加載 Pug 模板并返回一個函數 * `jade-loader`加載 Jade 模板并返回一個函數 * `markdown-loader`將 Markdown 轉譯為 HTML * [`react-markdown-loader`](https://github.com/javiercf/react-markdown-loader)使用 markdown-parse parser(解析器) 將 Markdown 編譯為 React 組件 * `posthtml-loader`使用[PostHTML](https://github.com/posthtml/posthtml)加載并轉換 HTML 文件 * `handlebars-loader`將 Handlebars 轉移為 HTML * [`markup-inline-loader`](https://github.com/asnowwolf/markup-inline-loader)將內聯的 SVG/MathML 文件轉換為 HTML。在應用于圖標字體，或將 CSS 動畫應用于 SVG 時非常有用。 ## **樣式** * [`style-loader`](https://www.webpackjs.com/loaders/style-loader)將模塊的導出作為樣式添加到 DOM 中 * [`css-loader`](https://www.webpackjs.com/loaders/css-loader)解析 CSS 文件后，使用 import 加載，并且返回 CSS 代碼 * [`less-loader`](https://www.webpackjs.com/loaders/less-loader)加載和轉譯 LESS 文件 * [`sass-loader`](https://www.webpackjs.com/loaders/sass-loader)加載和轉譯 SASS/SCSS 文件 * [`postcss-loader`](https://www.webpackjs.com/loaders/postcss-loader)使用[PostCSS](http://postcss.org/)加載和轉譯 CSS/SSS 文件 * `stylus-loader`加載和轉譯 Stylus 文件 ## **清理和測試(Linting && Testing)** * [`mocha-loader`](https://www.webpackjs.com/loaders/mocha-loader)使用[mocha](https://mochajs.org/)測試（瀏覽器/NodeJS） * [`eslint-loader`](https://github.com/webpack-contrib/eslint-loader)PreLoader，使用[ESLint](https://eslint.org/)清理代碼 * [`jshint-loader`](https://www.webpackjs.com/loaders/jshint-loader)PreLoader，使用[JSHint](http://jshint.com/about/)清理代碼 * `jscs-loader`PreLoader，使用[JSCS](http://jscs.info/)檢查代碼樣式 * [`coverjs-loader`](https://www.webpackjs.com/loaders/coverjs-loader)PreLoader，使用[CoverJS](https://github.com/arian/CoverJS)確定測試覆蓋率 ## **框架(Frameworks)** * `vue-loader`加載和轉譯[Vue 組件](https://vuejs.org/v2/guide/components.html) * `polymer-loader`使用選擇預處理器(preprocessor)處理，并且`require()`類似一等模塊(first-class)的 Web 組件 * `angular2-template-loader`加載和轉譯[Angular](https://angular.io/)組件 ## **其他** [`yaml-frontmatter-loader`](https://v4.webpack.docschina.org/loaders/yaml-frontmatter-loader/) 用于Webpack的YAML Frontmatter加載程序。將文件中的YAML轉換為JSON。您應該與json-loader連用 [cache-loader](https://v4.webpack.docschina.org/loaders/cache-loader/ 'npm install --save-dev cache-loader') 將以下loader的結果緩存在磁盤（默認）或數據庫中(推薦在性能開銷較大的 loader 之前添加此 loader) [coffee-redux-loader](https://v4.webpack.docschina.org/loaders/coffee-redux-loader/) 用于Webpack的Coffee Script Redux加載程序 [config-loader](https://v4.webpack.docschina.org/loaders/config-loader/) 已淘汰，請使用`webpack-cli` [exports-loader](https://v4.webpack.docschina.org/loaders/exports-loader/ "npm install exports-loader --save-dev") 導出webpack的加載程序模塊通過附加export \[...\] = ...語句從文件內部導出變量 [expose-loader](https://v4.webpack.docschina.org/loaders/expose-loader/) expose loader向全局對象添加模塊。這對于調試或支持依賴全局庫的庫非常有用 [extract-loader](https://v4.webpack.docschina.org/loaders/extract-loader/) **提取HTML和CSS** 類似于[extract-text-webpack-plugin](https://v4.webpack.docschina.org/plugins/extract-text-webpack-plugin/)和[mini-css-extract-plugin](https://v4.webpack.docschina.org/plugins/mini-css-extract-plugin/) [gzip-loader](https://v4.webpack.docschina.org/loaders/gzip-loader/) 啟用加載壓縮后的資源 [i18n-loader](https://www.webpackjs.com/loaders/i18n-loader/) [imports-loader/](https://www.webpackjs.com/loaders/imports-loader) 導入加載程序允許您使用依賴于特定全局變量的模塊 [istanbul-instrumenter-loader](https://v4.webpack.docschina.org/loaders/istanbul-instrumenter-loader/) [bundle-loader](https://v4.webpack.docschina.org/loaders/bundle-loader/) 使用istanbul-lib-instrument來測試JS文件，以進行后續代碼覆蓋率報告 [multi-loader](https://www.webpackjs.com/loaders/multi-loader/) [node-loader](https://www.webpackjs.com/loaders/node-loader/) [null-loader](https://v4.webpack.docschina.org/loaders/null-loader/) 返回空模塊的loader [polymer-webpack-loader](https://v4.webpack.docschina.org/loaders/polymer-webpack-loader/) 將html中的外聯轉換為import [react-proxy-loader](https://v4.webpack.docschina.org/loaders/react-proxy-loader/) [restyle-loader](https://v4.webpack.docschina.org/loaders/restyle-loader/) 樣式重載 [source-map-loader](https://v4.webpack.docschina.org/loaders/source-map-loader/) 從所有JavaScript條目中提取現有的源映射 [svg-inline-loader](https://v4.webpack.docschina.org/loaders/svg-inline-loader/) 將SVG內聯為模塊 [thread-loader](https://v4.webpack.docschina.org/loaders/thread-loader/) [transform-loader](https://v4.webpack.docschina.org/loaders/transform-loader/) [worker-loader](https://v4.webpack.docschina.org/loaders/worker-loader/) [workerize-loader](https://v4.webpack.docschina.org/loaders/workerize-loader/)