timg.jpg

寫在前面

前面兩篇文章，我們介紹了webpack一些概念和簡單的配置，對webpack有了一個初步的了解。今天的文章，我們將進入webpack的核心內(nèi)容?？垂倬W(wǎng)我們會發(fā)現(xiàn)，webpack的配置項非常之多，再加上一些自定義的Loader配置和Plugins配置，數(shù)目之龐大，不禁讓人望而卻步。但實際上，我們并不需要把所有的配置項都求全記下來，只需要根據(jù)我們的業(yè)務場景，在用到某些配置或者loader或者plugin的時候再去熟悉就行了。

Loader

通過之前文章的介紹，我們已經(jīng)知道了，模塊不僅僅是值JS內(nèi)容，還可能是圖片，樣式等內(nèi)容?，F(xiàn)在我們先引入一個圖片試試打包，如下

// 在前面的demo里面改index.js
var Header = require('./header.js')
var SiderBar = require('./siderBar.js')
var Content = require('./content.js')
var Banner = require('./banner.jpg')

new Header()
new SiderBar()
new Content()

這時候會發(fā)現(xiàn)打包報錯如下

error.PNG

const path = require('path')
module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js',
    },
    module: {
        rules: [{
            test: /.\jpg$/,
            use: {
                loader: 'file-loader'
            }
        }]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
}

注意，這里我們配置的是module項，意思是告訴webpack在遇到不認識的模塊時就要按照module里面的規(guī)則去打包，其中rules是一個數(shù)組，里面可以配置各種loader，配置loader的格式也如我們代碼中一樣，比較固定的，這里我們對于匹配以jpg結尾的文件使用fille-loader，在打包之前，我們要先對其使用npm安裝。安裝完成后，我們再執(zhí)行打包，這時候會發(fā)現(xiàn)打包成功了，并且打包后的文件也出現(xiàn)在了dist目錄下。理論上我們可以通過webpack Loader處理任何靜態(tài)資源。

到這里，我們應該知道Loader是什么了，Loader實際上時webapck的一種打包方案，當Webpack遇到不認識的模塊時，Loader可以為我們提供相應的打包方案。

下面我們接著改造一下代碼，體驗Loader，我們把index.js改成下面這樣，然后再打包運行

import Banner from './banner.jpg'
var img = new Image()
img.src=Banner
var root = document.getElementById('root')
root.append(img)

這時候我們發(fā)現(xiàn)，頁面上時可以正常展示出我們打包后的圖片的。到這里我想大家對Loader，以及其功能都不會陌生了，后面我們將通過更多的例子去學習更多的Loader。

通過靜態(tài)資源打包熟練對Loader的使用

file-loader

通過上面的實例，我們學會了用loader來解析jpg格式的圖片，但是我們發(fā)現(xiàn)，打包出來的圖片的文件名確實一長串hash，要想讓他保持和源文件一樣的文件名，我們也是可以通過配置來解決的

const path = require('path')
module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js',
    },
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]'
                }
            }
        }]
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
}

注意，我們在file-loader的配置項中加入了options配置項，在這里我們可以配置輸出文件的文件名，其中[name]為原始的文件名[ext]為原始的文件后綴。這樣配置完成后再試試打包，你會發(fā)現(xiàn)，打包輸出了一個和我們文件名字一模一樣的文件。當然了，我們想要打包其他格式的圖片，只需要test的正則就可以了。

我們管這種語法叫placeholder，也就是中文講的占位符。大家查看webpack官網(wǎng)，會發(fā)現(xiàn)file-loader的placeholder有多好多種，如下，我們可以根據(jù)需要 ，利用占位符對我們的打包文件進行包裝。

捕獲.PNG

有時候，我們還需要將圖片打包到一個單獨的文件夾下面，這個時候我們只需要在options中配置outputPath項就可以了。就像下面這樣，我們指定將后綴為jpg、png、gif的文件打包到images文件夾下。

use: {
   loader: 'file-loader',
   options: {
   name: '[name]_[hash].[ext]',
   outputPath: 'images/'
    }
}

關于file-loader的介紹就到這里，大家在日常開發(fā)的使用中，如果有需要可以去查閱它的官方文檔。

url-loader

這里再給大家介紹一個Loader叫url-loader。它的涵蓋了file-loader的全部功能，還有自己一些更加強大的功能，下面我來帶大家演示一下

首先，我們簡單修改一下配置

        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/'
                }
            }
        }]

當我們安裝好url-loader以后，執(zhí)行打包，這時候你會發(fā)現(xiàn)打包時成功的。但是我們的圖片卻沒有打包進我們的dist目錄下，這時候我們打開index.html卻能看到這張圖片被渲染了，這是為什么呢？

我們進入到打包出來的bundle.js中，這時候，會發(fā)現(xiàn)，在會有一個base64的圖片，這是因為，url-loader幫我們把圖片自動轉成看了base64字符串，然后放到js文件中，而不是生成文件。這樣做有以下優(yōu)缺點

• 圖片被打包進js文件中，就可以跟隨js一起加載，這樣可以減少http請求次數(shù)
• 如果圖片非常大，就會導致打包出來的js也非常大，導致了頁面的加載緩慢。

考慮到以上兩點優(yōu)缺點，我們可以這樣解決，為其設定一個范圍，假如是體積小的圖片，我們可以將其打包為base64放進js文件中，假如是體積大的圖片，我們就將其打包進dist目錄下的文件夾中。這樣就兩全其美了，我們做如下配置

options: {
  name: '[name]_[hash].[ext]',
  outputPath: 'images/',
  limit: 2048
}

這樣，我們的圖片大于2048字節(jié)的時候就會打包到文件夾中，小于2048字節(jié)就會生成base64打包進js中。試一試吧！

寫在最后

本篇為大家講解了Loader的作用，以及帶大家親自配置了使用了file-loader和url-loader，體會了loader的作用。后面的文章會為大家介紹更多的Loader，比如處理樣式文件的loader等。關注我，不迷路...