一、Webpack打包圖片

1.加載圖片資源的準(zhǔn)備

為了演示我們項(xiàng)目中可以加載圖片，我們需要在項(xiàng)目中使用圖片，比較常見(jiàn)的使用圖片的方式是兩種：

• img元素，設(shè)置src屬性；
• 其他元素（比如div），設(shè)置background-image的css屬性；

2.認(rèn)識(shí)asset module type

我們當(dāng)前使用的webpack版本是webpack5：

• 在webpack5之前，加載這些資源我們需要使用一些loader，比如raw-loader 、url-loader、file-loader；
• 在webpack5開(kāi)始，我們可以直接使用資源模塊類(lèi)型（asset module type），來(lái)替代上面的這些loader；

資源模塊類(lèi)型(asset module type)，通過(guò)添加 4 種新的模塊類(lèi)型，來(lái)替換所有這些 loader：

• asset/resource 發(fā)送一個(gè)單獨(dú)的文件并導(dǎo)出 URL。
• 之前通過(guò)使用 file-loader 實(shí)現(xiàn)；
• asset/inline 導(dǎo)出一個(gè)資源的 data URI。
• 之前通過(guò)使用 url-loader 實(shí)現(xiàn)；
• asset/source 導(dǎo)出資源的源代碼
• 之前通過(guò)使用 raw-loader 實(shí)現(xiàn)；
• asset 在導(dǎo)出一個(gè) data URI 和發(fā)送一個(gè)單獨(dú)的文件之間自動(dòng)選擇。
• 之前通過(guò)使用 url-loader，并且配置資源體積限制實(shí)現(xiàn)；

3.asset module type的使用

比如加載圖片，我們可以使用下面的方式：

{
    test: /\.(png|svg|jpg|jpeg|gif)$/i,
    type: "asset/resource"    
}

但是，如何可以自定義文件的輸出路徑和文件名呢？

• 方式一：修改output，添加assetModuleFilename屬性；
• 方式二：在Rule中，添加一個(gè)generator屬性，并且設(shè)置filename；

output: {
    filename: "js/bundle.js",
    path: path.resolve(__dirname, "./dist"),
    assetModuleFilename: "img/[name].[hash:6][ext]"    
}

{
    test: /\.(png|svg|jpg|jpeg|gif)$/i,
    type: "asset/resource",
    generator: {
        filename: "img/[name].[hash:6][ext]"
    }    
}

我們這里介紹幾個(gè)最常用的placeholder：

• [ext]： 處理文件的擴(kuò)展名；
• [name]：處理文件的名稱(chēng)；
• [hash]：文件的內(nèi)容，使用MD4的散列函數(shù)處理，生成的一個(gè)128位的hash值（32個(gè)十六進(jìn)制）；

4.url-loader的limit效果

開(kāi)發(fā)中我們往往是小的圖片需要轉(zhuǎn)換，但是大的圖片直接使用圖片即可

• 這是因?yàn)樾〉膱D片轉(zhuǎn)換base64之后可以和頁(yè)面一起被請(qǐng)求，減少不必要的請(qǐng)求過(guò)程；
• 而大的圖片也進(jìn)行轉(zhuǎn)換，反而會(huì)影響頁(yè)面的請(qǐng)求速度；

我們需要兩個(gè)步驟來(lái)實(shí)現(xiàn)：

• 步驟一：將type修改為asset；
• 步驟二：添加一個(gè)parser屬性，并且制定dataUrl的條件，添加maxSize屬性；

module.exports = {
    rules: [
        {
            test: /\.(png|svg|jpg|jpeg|gif)$/i,
            type: "asset",
            generator: {
                filename: "img/[name].[hash:6][ext]"
            },
            parser: {
                dataUrlCondition: {
                    maxSize: 100 * 1024
                }
            }
        }
    ]
}

二、babel

1.為什么需要babel

事實(shí)上，在開(kāi)發(fā)中我們很少直接去接觸babel，但是babel對(duì)于前端開(kāi)發(fā)來(lái)說(shuō)，目前是不可缺少的一部分：

• 開(kāi)發(fā)中，我們想要使用ES6+的語(yǔ)法，想要使用TypeScript，開(kāi)發(fā)React項(xiàng)目，它們都是離不開(kāi)Babel的；
• 所以，學(xué)習(xí)Babel對(duì)于我們理解代碼從編寫(xiě)到線(xiàn)上的轉(zhuǎn)變過(guò)程至關(guān)重要；

那么，Babel到底是什么呢？

• Babel是一個(gè)工具鏈，主要用于舊瀏覽器或者環(huán)境中將ECMAScript 2015+代碼轉(zhuǎn)換為向后兼容版本的JavaScript；
• 包括：語(yǔ)法轉(zhuǎn)換、源代碼轉(zhuǎn)換等；

2.babel命令行的使用

babel本身可以作為一個(gè)獨(dú)立的工具（和postcss一樣），不和webpack等構(gòu)建工具配置來(lái)單獨(dú)使用。

如果我們希望在命令行嘗試使用babel，需要安裝如下庫(kù)：

• @babel/core：babel的核心代碼，必須安裝；
• @babel/cli：可以讓我們?cè)诿钚惺褂胋abel；

npm install -D @babel/core @babel/cli

使用babel來(lái)處理我們的源代碼：

• src：是源文件的目錄；
• –out-dir：指定要輸出的文件夾dist；

npx babel src --out-dir dist

3.babel插件的使用

比如我們需要轉(zhuǎn)換箭頭函數(shù)，那么我們就可以使用箭頭函數(shù)轉(zhuǎn)換相關(guān)的插件：

npm install @babel/plugin-transform-arrow-functions -D
npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions

查看轉(zhuǎn)換后的結(jié)果：我們會(huì)發(fā)現(xiàn) const 并沒(méi)有轉(zhuǎn)成 var

• 這是因?yàn)?plugin-transform-arrow-functions，并沒(méi)有提供這樣的功能；
• 我們需要使用 plugin-transform-block-scoping 來(lái)完成這樣的功能；

npm install @babel/plugin-transform-block-scoping -D 
npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping
						,@babel/plugin-transform-arrow-functions

4.babel的預(yù)設(shè)preset

但是如果要轉(zhuǎn)換的內(nèi)容過(guò)多，一個(gè)個(gè)設(shè)置是比較麻煩的，我們可以使用預(yù)設(shè)（preset）：

后面我們?cè)倬唧w來(lái)講預(yù)設(shè)代表的含義；

安裝@babel/preset-env預(yù)設(shè)：

npm install -D @babel/preset-env

執(zhí)行如下命令：

npx babel src --out-dir dist --presets=@babel/preset-env

5.babel-loader

在實(shí)際開(kāi)發(fā)中，我們通常會(huì)在構(gòu)建工具中通過(guò)配置babel來(lái)對(duì)其進(jìn)行使用的，比如在webpack中。

那么我們就需要去安裝相關(guān)的依賴(lài)：

如果之前已經(jīng)安裝了@babel/core，那么這里不需要再次安裝；

npm install babel-loader -D

我們可以設(shè)置一個(gè)規(guī)則，在加載js文件時(shí)，使用我們的babel：

module.exports = {
	module: {
		rules: [
			{
				test: /\.m?js$/,
				use: {
					loader: "babel-loader"
				}
			}
		]
	}
}

6.babel-preset

如果我們一個(gè)個(gè)去安裝使用插件，那么需要手動(dòng)來(lái)管理大量的babel插件，我們可以直接給webpack提供一個(gè)preset，webpack會(huì)根據(jù)我們的預(yù)設(shè)來(lái)加載對(duì)應(yīng)的插件列表，并且將其傳遞給babel。

比如常見(jiàn)的預(yù)設(shè)有三個(gè)：

• env
• react
• TypeScript

安裝preset-env：

npm install @babel/preset-env

module.exports = {
    module: {
        rules: [
			{
				test: /\.m?js$/,
				use: {
					loader: "babel-loader",
                    options: {
                        presets: [
                            ["@babel/preset-env"]
                        ]
                    }
				}
			}
		]
    }
}

三、加載Vue文件

1.編寫(xiě)App.vue代碼

在開(kāi)發(fā)中我們會(huì)編寫(xiě)Vue相關(guān)的代碼，webpack可以對(duì)Vue代碼進(jìn)行解析：

接下來(lái)我們編寫(xiě)自己的App.vue代碼；

<template>
  <h2>{{ title }}</h2>
</template>
<script>
export default {
  data() {
    return {
      title: "我是標(biāo)題"
    }
  }
}
</script>

2.App.vue的打包過(guò)程

我們對(duì)代碼打包會(huì)報(bào)錯(cuò)：我們需要合適的Loader來(lái)處理文件。

這個(gè)時(shí)候我們需要使用vue-loader：

npm install vue-loader -D

在webpack的模板規(guī)則中進(jìn)行配置：

{
    test: /\.vue$/,
    loader: "vue-loader"
}

3.@vue/compiler-sfc

打包依然會(huì)報(bào)錯(cuò)，這是因?yàn)槲覀儽仨毺砑覢vue/compiler-sfc來(lái)對(duì)template進(jìn)行解析：

npm install @vue/compiler-sfc -D

另外我們需要配置對(duì)應(yīng)的Vue插件：

const { VueLoaderPlugin } = require('vue-loader/dist/index')
module.exports = {
    module: {},
    plugins: [
        new VueLoaderPlugin()
    ]
}

重新打包即可支持App.vue的寫(xiě)法

另外，我們也可以編寫(xiě)其他的.vue文件來(lái)編寫(xiě)自己的組件；

四、resolve模塊解析

1.resolve模塊解析

resolve用于設(shè)置模塊如何被解析：

• 在開(kāi)發(fā)中我們會(huì)有各種各樣的模塊依賴(lài)，這些模塊可能來(lái)自于自己編寫(xiě)的代碼，也可能來(lái)自第三方庫(kù)；
• resolve可以幫助webpack從每個(gè) require/import 語(yǔ)句中，找到需要引入到合適的模塊代碼；
• webpack 使用 enhanced-resolve 來(lái)解析文件路徑；

webpack能解析三種文件路徑：

絕對(duì)路徑

• 由于已經(jīng)獲得文件的絕對(duì)路徑，因此不需要再做進(jìn)一步解析。

相對(duì)路徑

• 在這種情況下，使用 import 或 require 的資源文件所處的目錄，被認(rèn)為是上下文目錄；
• 在 import/require 中給定的相對(duì)路徑，會(huì)拼接此上下文路徑，來(lái)生成模塊的絕對(duì)路徑；

模塊路徑

• 在 resolve.modules中指定的所有目錄檢索模塊；
  • 默認(rèn)值是 [‘node_modules’]，所以默認(rèn)會(huì)從node_modules中查找文件；
• 我們可以通過(guò)設(shè)置別名的方式來(lái)替換初識(shí)模塊路徑，具體后面講解alias的配置；

2.文件還是文件夾

如果是一個(gè)文件：

• 如果文件具有擴(kuò)展名，則直接打包文件；
• 否則，將使用 resolve.extensions選項(xiàng)作為文件擴(kuò)展名解析；

如果是一個(gè)文件夾：

• 會(huì)在文件夾中根據(jù) resolve.mainFiles配置選項(xiàng)中指定的文件順序查找；
  • resolve.mainFiles的默認(rèn)值是 [‘index’]；
  • 再根據(jù) resolve.extensions來(lái)解析擴(kuò)展名；

3.extensions和alias配置

extensions是解析到文件時(shí)自動(dòng)添加擴(kuò)展名：

默認(rèn)值是 [‘.wasm’, ‘.mjs’, ‘.js’, ‘.json’]；所以如果我們代碼中想要添加加載 .vue 或者 jsx 或者 ts 等文件時(shí)，我們必須自己寫(xiě)上擴(kuò)展名；

另一個(gè)非常好用的功能是配置別名alias：

• 特別是當(dāng)我們項(xiàng)目的目錄結(jié)構(gòu)比較深的時(shí)候，或者一個(gè)文件的路徑可能需要 …/…/…/這種路徑片段；
• 我們可以給某些常見(jiàn)的路徑起一個(gè)別名；

module.exports = {
  resolve: {
    extensions: [".js", ".json", ".vue", ".jsx", ".ts", ".tsx"],
    alias: {
      utils: path.resolve(__dirname, "./src/utils")
    }
  },
}

到此這篇關(guān)于Webpack打包圖片-js-vue的文章就介紹到這了,更多相關(guān)Webpack打包圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！