webpack中的loader  

loader概述

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

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

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

流程圖

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

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

li{
    list-style: none;
}

任何相關文件，我們都采取模塊導入的方式，在index.js中導入css模塊

import './css/index.css'

我們保存后，發(fā)現會報錯，是因為loader沒有配置。

打包處理css文件

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

其中，test表示匹配的文件類型，use表示對應要調用的loader。

注意

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

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

重新運行服務器，發(fā)現css有了效果。

打包處理less文件

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

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

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

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

使用npm i less-loader@10.0.1 less@4.1.1 -D 下載相關依賴。

再從webpack.config.js中的css loader下面，進行一個less Loader的設置，就可以成功應用less樣式文件了。

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

打包處理圖片

base64

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

打包步驟

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

其中？之后的是loader的參數項：

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

操作練習

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

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

寫好img標簽

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

在index.js中進行模塊導入與應用，導入的logo就是圖片的base64

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

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

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

安裝完成后進行webpack.config.js的配置

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

現在 在進行打包運行 圖片就能夠成功顯示了。

打包處理js高級語法

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

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

//高級 js

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

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

console.log(Person.info);

安裝loader依賴包并進行配置

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

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

新建一個babel.config.js文件，并進行配置。

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

接下來就可以進行運行打包，瀏覽器控制臺就能正確顯示。

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

優(yōu)化打包

在scripts中設置多個打包方式

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

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

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

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

圖片存放路徑

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

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

js文件存放路徑

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

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

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

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

安裝插件

npm i clean-webpack-plugin -D

導入模塊

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

將實例化對象寫入之前的plugins數組中

plugins: [HtmlPlugin, new CleanWebpackPlugin()],

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

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

文件目錄設置

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

我們需要在webpack.config.js中進行設置

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

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

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

Source Map

什么是Source Map

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

默認Source Map的問題

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

解決默認Source Map的問題

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

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

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

只定位行數不暴露源碼

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

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

Source Map的最佳實踐

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

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

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

• 建議關閉Source Map或將devtool的值設置為nosources-source-map
• 好處：放置源碼泄露，提高網站的安全性。

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

最新評論