## loader 特性 * loader 支持鏈式調用。鏈中的每個 loader 會將轉換應用在已處理過的資源上。一組鏈式的 loader 將按照相反的順序執行。鏈中的第一個 loader 將其結果（也就是應用過轉換后的資源）傳遞給下一個 loader，依此類推。最后，鏈中的最后一個 loader，返回 webpack 所期望的 JavaScript。 * loader 可以是同步的，也可以是異步的。 * loader 運行在 Node.js 中，并且能夠執行任何操作。 * loader 可以通過`options`對象配置（仍然支持使用`query`參數來設置選項，但是這種方式已被廢棄）。 * 除了常見的通過`package.json`的`main`來將一個 npm 模塊導出為 loader，還可以在 module.rules 中使用`loader`字段直接引用一個模塊。 * 插件(plugin)可以為 loader 帶來更多特性。 * loader 能夠產生額外的任意文件。 可以通過 loader 的預處理函數，為 JavaScript 生態系統提供更多能力。用戶現在可以更加靈活地引入細粒度邏輯，例如：壓縮、打包、語言轉譯（或編譯）和[更多其他特性](https://webpack.docschina.org/loaders)。 ## 實例 實例：把`.md`格式文件插入到`.vue`文件對應（插槽）位置，這樣就可以`.md`文檔格式編寫文章，并統一設定文章布局等功能了。了解更多`loader`[傳送](https://webpack.docschina.org/concepts/loaders/)。 如下圖，左側代碼右側效果：  ### 1、自定義loader，它實質上就是個函數 ***** 借助 [hyperdown](https://www.npmjs.com/package/hyperdown/v/2.4.3)解析器和 [prismjs](https://www.npmjs.com/package/prismjs)裝逼用（高亮等效果），哈哈哈。 其次，這里通過`replace()`方法替換對應的字符即可，這個看具體`loader`的需求了 ``` const HyperDown = require('hyperdown'); const Prism = require('prismjs'); ```  ### 2、不用多說，使用loader ***** 在配置`loader`的地方，通過`require.resolve()`即可，別忘了加上 `test: /\.md$/`指定文件格式和順序（從右到左或從下到上）哦。  ### 3、.vue文件中使用.md ***** 使用就簡單了，`.vue`文件作為父級組件，`.md`文件作為子組件使用。  ### 4、其他 ***** 項目地址： https://github.com/wwmingly/vue-demo.git 參考地址：https://webpack.docschina.org/concepts/loaders/#using-loaders