如何在webpack中使用loader

1、什麼是loader

loader 用於對模塊的源代碼進行轉換。loader 可使你在 import 或"加載"模塊時預處理文件。所以，loader 相似於其餘構建工具中「任務(task)」，並提供了處理前端構建步驟的強大方法。loader 能夠將文件從不一樣的語言（如 TypeScript）轉換爲 JavaScript，或將內聯圖像轉換爲 data URL。loader 甚至容許你直接在 JavaScript 模塊中 import CSS文件！

2、怎麼使用loader

示例：加載一個less-loader

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

npm install --save-dev css-loader

二、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'

 3、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 組件