webpack簡易教程之loader

webpack自稱可以打包任何文件，這句話咋聽一下好像在吹牛逼，由於 webpack自己只能理解 JavaScript。可是因爲 webpack中有 loader的存在，能夠將全部類型的文件轉換爲 webpack可以處理的有效模塊，而後利用 webpack的打包能力對它們進行處理————前提是要有對應的loader存在

Loader特性

• loader 支持鏈式傳遞。可以對資源使用流水線(pipeline)。一組鏈式的 loader 將按照前後順序進行編譯。loader 鏈中的第一個 loader 返回值給下一個 loader。在最後一個 loader，返回 webpack 所預期的 JavaScript。
• loader 能夠是同步的，也能夠是異步的。
• loader 運行在 Node.js 中，而且可以執行任何可能的操做。
• loader 接收查詢參數。用於對 loader 傳遞配置。
• loader 也可以使用 options 對象進行配置。
• 除了使用 package.json 常見的 main 屬性，還能夠將普通的 npm 模塊導出爲 loader，作法是在 package.json 裏定義一個 loader 字段。
• 插件(plugin)能夠爲 loader 帶來更多特性。
• loader 可以產生額外的任意文件。

固然，上面這些特性暫時看不明白也不要緊，學會如何使用纔是重點。因此重點看如何使用Loader

使用Loader

下面是常見的webpack配置的基本結構：

const path = require('path')

module.exports = {
    entry: './src/index.js',
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module:{
        ...
    }
}

其中entry用來設置webpack的入口文件，output是用來設置打包後的文件輸出位置以及相應的文件名。這裏就不詳細介紹，下面咱們來看一下常見的loader配置：

在文件中配置

const path = require('path')

module.exports = {
    entry: './src/index.js',
    output:{
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module:{
        rules:[
            {
                test: /\.css$/,
                use: ['style-loader','css-loader']
            },
            {
                test: /\.sass$/,
                use: ['sass-loader','node-sass']
            },
            {
                test: /\.(png|jp?eg|gif)$/,
                use: ['file-loader']
            },
            {
                test: /\.json$/,
                use: ['json-loader']
            },
            {
                test: /\.txt$/,
                use: ['raw-loader']
            }
        ]
    }
}

rules數組裏面的每一個對象都對應着一個匹配規則，從上到下分別匹配.css文件，.sass文件，圖片文件，.json文件以及.txt文本文件
另外，在運行以前千萬記得要安裝對應的依賴，示例：

npm install css-loader style-loader --save-dev

直接導入

能夠在 import 語句或任何等效於 import 的方式中指定 loader。使用 ! 將資源中的 loader 分開。分開的每一個部分都相對於當前目錄解析。?後面能夠傳遞參數，例如 ?key=value&foo=bar，或者一個 JSON 對象，例如 ?{"key":"value","foo":"bar"}

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

經過CLI使用loader

示例：webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'

以上三種配置方式，第一種應該用的比較多，畢竟配置也比較方便...

總結

在配置loader的時候儘可能使用文件進行配置，而且能夠在官方文檔找到相應的loader，具體的參數傳入能夠在npm官網上找到，能夠根據具體的需求來設置

掃描下方的二維碼或搜索「tony老師的前端補習班」關注個人微信公衆號，那麼就能夠第一時間收到個人最新文章。