一、Webpack打包圖片

1.加載圖片資源的準備

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

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

2.認識asset module type

我們當前使用的webpack版本是webpack5：

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

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

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

3.asset module type的使用

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

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

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

• 方式一：修改output，添加assetModuleFilename屬性；
• 方式二：在Rule中，添加一個generator屬性，并且設置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]"
    }    
}

我們這里介紹幾個最常用的placeholder：

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

4.url-loader的limit效果

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

• 這是因為小的圖片轉換base64之后可以和頁面一起被請求，減少不必要的請求過程；
• 而大的圖片也進行轉換，反而會影響頁面的請求速度；

我們需要兩個步驟來實現(xiàn)：

• 步驟一：將type修改為asset；
• 步驟二：添加一個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

事實上，在開發(fā)中我們很少直接去接觸babel，但是babel對于前端開發(fā)來說，目前是不可缺少的一部分：

• 開發(fā)中，我們想要使用ES6+的語法，想要使用TypeScript，開發(fā)React項目，它們都是離不開Babel的；
• 所以，學習Babel對于我們理解代碼從編寫到線上的轉變過程至關重要；

那么，Babel到底是什么呢？

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

2.babel命令行的使用

babel本身可以作為一個獨立的工具（和postcss一樣），不和webpack等構建工具配置來單獨使用。

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

• @babel/core：babel的核心代碼，必須安裝；
• @babel/cli：可以讓我們在命令行使用babel；

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

使用babel來處理我們的源代碼：

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

npx babel src --out-dir dist

3.babel插件的使用

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

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

查看轉換后的結果：我們會發(fā)現(xiàn) const 并沒有轉成 var

• 這是因為 plugin-transform-arrow-functions，并沒有提供這樣的功能；
• 我們需要使用 plugin-transform-block-scoping 來完成這樣的功能；

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的預設preset

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

后面我們再具體來講預設代表的含義；

安裝@babel/preset-env預設：

npm install -D @babel/preset-env

執(zhí)行如下命令：

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

5.babel-loader

在實際開發(fā)中，我們通常會在構建工具中通過配置babel來對其進行使用的，比如在webpack中。

那么我們就需要去安裝相關的依賴：

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

npm install babel-loader -D

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

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

6.babel-preset

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

比如常見的預設有三個：

• 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.編寫App.vue代碼

在開發(fā)中我們會編寫Vue相關的代碼，webpack可以對Vue代碼進行解析：

接下來我們編寫自己的App.vue代碼；

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

2.App.vue的打包過程

我們對代碼打包會報錯：我們需要合適的Loader來處理文件。

這個時候我們需要使用vue-loader：

npm install vue-loader -D

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

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

3.@vue/compiler-sfc

打包依然會報錯，這是因為我們必須添加@vue/compiler-sfc來對template進行解析：

npm install @vue/compiler-sfc -D

另外我們需要配置對應的Vue插件：

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

重新打包即可支持App.vue的寫法

另外，我們也可以編寫其他的.vue文件來編寫自己的組件；

四、resolve模塊解析

1.resolve模塊解析

resolve用于設置模塊如何被解析：

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

webpack能解析三種文件路徑：

絕對路徑

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

相對路徑

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

模塊路徑

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

2.文件還是文件夾

如果是一個文件：

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

如果是一個文件夾：

• 會在文件夾中根據(jù) resolve.mainFiles配置選項中指定的文件順序查找；
  • resolve.mainFiles的默認值是 [‘index’]；
  • 再根據(jù) resolve.extensions來解析擴展名；

3.extensions和alias配置

extensions是解析到文件時自動添加擴展名：

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

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

• 特別是當我們項目的目錄結構比較深的時候，或者一個文件的路徑可能需要 …/…/…/這種路徑片段；
• 我們可以給某些常見的路徑起一個別名；

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

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

最新評論