如何在webpack中使用loader

一、什么是loader

loader 用於對模塊的源代碼進行轉換。loader 可以使你在 import 或"加載"模塊時預處理文件。因此，loader 類似於其他構建工具中“任務(task)”，並提供了處理前端構建步驟的強大方法。loader 可以將文件從不同的語言（如 TypeScript）轉換為 JavaScript，或將內聯圖像轉換為 data URL。loader 甚至允許你直接在 JavaScript 模塊中 import CSS文件！

二、怎么使用loader

示例：加載一個less-loader

1、首先使用npm命令安裝less-loader

npm install --save-dev css-loader

2、loader使用

loader有三種方式可以引入到你的程序中

（1）Configuration（配置方式）：推薦使用配置方式，在你的webpack.config.js 中配置進去

{
                    test: /\.less$/,
                    use: [{
                        loader: "style-loader" // creates style nodes from JS strings
                    }, {
                        loader: "css-loader" // translates CSS into CommonJS
                    }, {
                        loader: "less-loader" // compiles Less to CSS
                    }]
                },

（2）inline(內聯方式引入)：通過使用import方式引入

import Styles from 'style-loader!less-loader?modules!./styles.less';

(3)cli(命令行方式引入)：可以使用命令的形式引入（不推薦，太麻煩）

webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

 三、loaders的分類（具體用法請參考官網https://doc.webpack-china.org/loaders）

文件

• raw-loader 加載文件原始內容（utf-8）

• val-loader 將代碼作為模塊執行，並將 exports 轉為 JS 代碼

• url-loader 像 file loader 一樣工作，但如果文件小於限制，可以返回 data URL

• file-loader 將文件發送到輸出文件夾，並返回（相對）URL

JSON

• json-loader 加載 JSON 文件（默認包含）
• json5-loader 加載和轉譯 JSON 5 文件
• cson-loader 加載和轉譯 CSON 文件

轉換編譯(Transpiling)

• script-loader 在全局上下文中執行一次 JavaScript 文件（如在 script 標簽），不需要解析
• babel-loader 加載 ES2015+ 代碼，然后使用 Babel 轉譯為 ES5
• buble-loader 使用 Bublé 加載 ES2015+ 代碼，並且將代碼轉譯為 ES5
• traceur-loader 加載 ES2015+ 代碼，然后使用 Traceur 轉譯為 ES5
• ts-loader 或 awesome-typescript-loader 像 JavaScript 一樣加載 TypeScript 2.0+
• coffee-loader 像 JavaScript 一樣加載 CoffeeScript

模板(Templating)

• html-loader 導出 HTML 為字符串，需要引用靜態資源
• pug-loader 加載 Pug 模板並返回一個函數
• jade-loader 加載 Jade 模板並返回一個函數
• markdown-loader 將 Markdown 轉譯為 HTML
• react-markdown-loader 使用 markdown-parse parser(解析器) 將 Markdown 編譯為 React 組件
• posthtml-loader 使用 PostHTML 加載並轉換 HTML 文件
• handlebars-loader 將 Handlebars 轉移為 HTML
• markup-inline-loader 將內聯的 SVG/MathML 文件轉換為 HTML。在應用於圖標字體，或將 CSS 動畫應用於 SVG 時非常有用。

樣式

• style-loader 將模塊的導出作為樣式添加到 DOM 中
• css-loader 解析 CSS 文件后，使用 import 加載，並且返回 CSS 代碼
• less-loader 加載和轉譯 LESS 文件
• sass-loader 加載和轉譯 SASS/SCSS 文件
• postcss-loader 使用 PostCSS 加載和轉譯 CSS/SSS 文件
• stylus-loader 加載和轉譯 Stylus 文件

清理和測試(Linting && Testing)

• mocha-loader 使用 mocha 測試（瀏覽器/NodeJS）
• eslint-loader PreLoader，使用 ESLint 清理代碼
• jshint-loader PreLoader，使用 JSHint 清理代碼
• jscs-loader PreLoader，使用 JSCS 檢查代碼樣式
• coverjs-loader PreLoader，使用 CoverJS 確定測試覆蓋率

框架(Frameworks)

• vue-loader 加載和轉譯 Vue 組件
• polymer-loader 使用選擇預處理器(preprocessor)處理，並且 require() 類似一等模塊(first-class)的 Web 組件
• angular2-template-loader 加載和轉譯 Angular 組件