webpack中的loader  

loader概述

在實(shí)際開發(fā)過程中，webpack默認(rèn)只能打包處理以js后綴名結(jié)尾的模塊，其他非.js后綴名結(jié)尾模塊，webpack默認(rèn)處理不了，需要調(diào)用loader加載器才可以正常打包，否則會報錯！

loader可以協(xié)助webpack打包處理特定的文件模塊。

• css-loader可以打包處理.css相關(guān)的文件
• less-loader可以打包處理.less相關(guān)的文件
• babel-loader可以打包處理webpack無法處理的高級js語法

流程圖

接下來我們需要移除無序列表中的行頭前綴。

在src文件夾中創(chuàng)建css文件夾，再從css文件夾中創(chuàng)建index.css文件，并寫好樣式代碼。

li{
    list-style: none;
}

任何相關(guān)文件，我們都采取模塊導(dǎo)入的方式，在index.js中導(dǎo)入css模塊

import './css/index.css'

我們保存后，發(fā)現(xiàn)會報錯，是因?yàn)閘oader沒有配置。

打包處理css文件

1. 運(yùn)行npm i style-loader@3.0.0 css-loader@5.2.6 -D命令，安裝處理css文件的loader
2. 在webpack.config.js的module->rules數(shù)組中，添加loader規(guī)則如下

其中，test表示匹配的文件類型，use表示對應(yīng)要調(diào)用的loader。

注意

• use數(shù)組中指定的loader順序是固定的。
• 多個loader的調(diào)用順序是從后往前調(diào)用。在webpack.config.js文件中寫入如下代碼

module: {
    rules: [ 
        {test: /\.css$/, use:['style-loader', 'css-loader'] }
        ] 
    }

重新運(yùn)行服務(wù)器，發(fā)現(xiàn)css有了效果。

打包處理less文件

1. 運(yùn)行npm i less-loader@10.0.1 less@4.1.1 -D命令
2. 在webpack.config.js的module->rules數(shù)組中，添加loader規(guī)則如下：

寫一個less樣式文件，文件與css同級。

html,body,ul{
    margin: 0;
    padding: 0;
    li {
        line-height: 30px;
        padding-left: 20px;
        font-size: 12px;
    }
}

樣式文件寫完后，然后進(jìn)行l(wèi)ess模塊導(dǎo)入，保存后會報相同的錯誤。

使用npm i less-loader@10.0.1 less@4.1.1 -D 下載相關(guān)依賴。

再從webpack.config.js中的css loader下面，進(jìn)行一個less Loader的設(shè)置，就可以成功應(yīng)用less樣式文件了。

{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }

打包處理圖片

base64

使用base64字符串來加載圖片，可以減少不必要的請求，瀏覽器在獲取標(biāo)簽的同時可以一并獲取到圖片。

打包步驟

1. 運(yùn)行npm i url-loader@4.1.1 file-loader@6.2.0 -D命令
2. 在webpack.config.js的module->rules數(shù)組中，添加loader規(guī)則如下

其中？之后的是loader的參數(shù)項(xiàng)：

• limit用來指定圖片的大小，單位是字節(jié)（byte）
• 只有<=limit大小的圖片，才會被轉(zhuǎn)為base64格式的圖片

操作練習(xí)

目標(biāo)：添加一個img標(biāo)簽通過動態(tài)方法給它添加src值。

首先在src目錄下建立一個images文件夾，里面放置一張圖片。

寫好img標(biāo)簽

<img src="" alt="" class="box">

在index.js中進(jìn)行模塊導(dǎo)入與應(yīng)用，導(dǎo)入的logo就是圖片的base64

//導(dǎo)入圖片文件
import logo from './images/logo.jpg';
//給img標(biāo)簽的src屬性賦值
$('.box').attr('src', logo)

然后進(jìn)行l(wèi)oader的安裝。

npm i url-loader@4.1.1 file-loader@6.2.0 -D

安裝完成后進(jìn)行webpack.config.js的配置

//處理圖片文件的loader
{test:/\.jpg|png|gif$/,use:'url-loader'}

現(xiàn)在 在進(jìn)行打包運(yùn)行 圖片就能夠成功顯示了。

打包處理js高級語法

特別高級的js語法webpack本身也無法處理，得需要相應(yīng)的loader。

在index.js中書寫js高級語法

//高級 js

//定義裝飾器函數(shù)
function info(target) {
    target.info = 'Person info';
}

//添加裝飾器
@info
//定義一個類
class Person { };

console.log(Person.info);

安裝loader依賴包并進(jìn)行配置

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

//處理高級js的loader，exclude用來忽略不用轉(zhuǎn)換的第三方包
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ } 

新建一個babel.config.js文件，并進(jìn)行配置。

module.exports = {
     //轉(zhuǎn)換高級語法 
     plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
    }

接下來就可以進(jìn)行運(yùn)行打包，瀏覽器控制臺就能正確顯示。

優(yōu)化打包以及圖片和js文件存放路徑

優(yōu)化打包

在scripts中設(shè)置多個打包方式

其中前兩個打包模式mode是webpack.config.js中設(shè)置的development模式

第一個打包模式是在內(nèi)存中顯示的便于開發(fā)瀏覽。

第二個是打包到物理層面上的打包。

第三個也是打包到物理層面上的打包，只不過使用的是生成模式會對代碼進(jìn)行壓縮，直接在這里設(shè)置mode，優(yōu)先級大于webpack.config.js中的設(shè)置。

圖片存放路徑

在前面的圖片loader中 除了limit可以設(shè)置處理圖片的最大值，（轉(zhuǎn)化成base64的圖片不會被進(jìn)行打包，）我們還可以設(shè)置圖片的存放路徑，用&鏈接通過outputPath進(jìn)行設(shè)置。

{ test: /\.jpg|png|gif$/, use: 'url-loader?limit=4000&outputPath=images' }, 

js文件存放路徑

只需要設(shè)置輸出文件名前，加一個文件夾，輸出的時候就會帶著這個文件夾。

output: {
    //指定存放目錄 
    path: path.join(__dirname, 'dist1'), 
    filename: 'js/new.js' 
    },

自動清理dist目錄下的舊文件

為了在每次打包發(fā)布時自動清理掉dist目錄中的舊文件，可以安裝并配置clean-webpack-plugin插件。

安裝插件

npm i clean-webpack-plugin -D

導(dǎo)入模塊

const {CleanWebpackPlugin } = require('clean-webpack-plugin');

將實(shí)例化對象寫入之前的plugins數(shù)組中

plugins: [HtmlPlugin, new CleanWebpackPlugin()],

這樣 在我們每次運(yùn)行打包輸出文件的時候，都會自動清除原來文件，重新生成。

在新版本中，我們可以直接在output輸出文件夾下面加一個clean：true的屬性，效果是一樣的。

文件目錄設(shè)置

當(dāng)我們引入文件時，如果層級過深的化，就會看到…/…/…/…/…/main.js，非常的不便于閱讀與理解，除了從內(nèi)到外尋找文件，我們還可以直接從外層尋找文件，可以直接設(shè)置指定的文件名為固定文件。

我們需要在webpack.config.js中進(jìn)行設(shè)置

resolve: {
        alias: { 
            //@就代表src文件夾 
            '@': path.join(__dirname, 'src') 
        } 
}

創(chuàng)建info.js 和msg.js文件進(jìn)行測試。

效果是一樣的 實(shí)際上就是絕對路徑，設(shè)置了哥文件夾變量。

Source Map

什么是Source Map

Source Map就是一個信息文件，里面儲存著位置信息。也就是說，Source Map文件中存儲著壓縮混淆后的代碼，所對應(yīng)的轉(zhuǎn)換前的位置。
有了它，出錯的時候，除錯工具將直接顯示原始代碼，而不是轉(zhuǎn)換后的代碼，能夠極大的方便后期的調(diào)試。

默認(rèn)Source Map的問題

開發(fā)環(huán)境下默認(rèn)生成的Source Map，記錄的是生成后的代碼的位置，會導(dǎo)致運(yùn)行時報錯的行數(shù)與源代碼行數(shù)的不一致。

解決默認(rèn)Source Map的問題

開發(fā)環(huán)境下，推薦在webpack.config.js中添加如下的配置，即可保證運(yùn)行時報錯的行數(shù)與源代碼行數(shù)一致。

//開發(fā)測試階段，建議大家把devtool的值設(shè)置為eval-source-map,便于調(diào)試。 
devtool: 'eval-source-map', //運(yùn)行時報錯的行數(shù)與源代碼一致 //
devtool: 'source-map', //還會在本地生產(chǎn)一個map記錄文件

在生產(chǎn)環(huán)境下，如果省略了devtool選項(xiàng)，則最終生成的文件中不包含Source Map，這能夠防止原始代碼通過Source Map的形式暴露給別有所圖之人。

只定位行數(shù)不暴露源碼

在生產(chǎn)環(huán)境下，如果只想定位報錯的具體行數(shù)，且不想暴露源碼，此時可以將devtool的值設(shè)置為nosources-source-map。

//在實(shí)際發(fā)布的時候，建議大家把devtool的值設(shè)置為nosources-source-map，或直接關(guān)閉devtool。
devtool:'nosources-source-map' 只顯示行數(shù)不暴露源碼

Source Map的最佳實(shí)踐

1.開發(fā)環(huán)境下

• 建議把devtool的值設(shè)置為eval-source-map
• 好處：可以精準(zhǔn)定位到具體的錯誤行

2.生產(chǎn)環(huán)境下

• 建議關(guān)閉Source Map或?qū)evtool的值設(shè)置為nosources-source-map
• 好處：放置源碼泄露，提高網(wǎng)站的安全性。

到此這篇關(guān)于Vue 各種loader的基本配置與使用示例教程的文章就介紹到這了,更多相關(guān)loader的基本配置與使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論