前端工程化10-webpack靜態的模塊化打包工具之各種loader處理器

9.1、案例編寫

我們創建一個component.js

  • 通過JavaScript創建了一個元素，并且希望給它設置一些樣式；

image-20240706150636239

我們自己寫的css,要把他加入到Webpack的圖結構當中，這樣才能被webpack檢測到進行打包，

style.css–>div_cn.js–>main.js main.js就是工程的入口文件

但是沒有對應的處理器loader我們也不能把css文件進行打包，打包css我們需要用的loader為css-loader

npm install css-loader -D

9.2、css-loader的使用

上面的錯誤信息告訴我們需要一個loader來加載這個css文件，但是loader是什么呢？

  • loader 可以用于對模塊的源代碼進行轉換；
  • 我們可以將css文件也看成是一個模塊，我們是通過import來加載這個模塊的；
  • 在加載這個模塊時，webpack其實并不知道如何對其進行加載，我們必須制定對應的loader來完成這個功能；

那么我們需要一個什么樣的loader呢？

  • 對于加載css文件來說，我們需要一個可以讀取css文件的loader；
  • 這個loader最常用的是css-loader；

css-loader的安裝：

npm install css-loader -D

webpack這個東西，你在不配置其他插件的同時他是具備處理js功能的，但是對于其他的一些文件，比如css,圖片,vue文件他是不知道怎么處理的，但是我們可以配置一大堆的插件，來達到打包各種文件，進行代碼壓縮，代碼轉換的功能，webpack的拓展性是無敵

9.3、css-loader的使用方案

如何使用這個loader來加載css文件呢？有三種方式：

  • 內聯方式；
  • CLI方式（webpack5中不再使用）；
  • 配置方式；

內聯方式：

  • 內聯方式使用較少，因為不方便管理；

  • 在引入的樣式前加上使用的loader，并且使用!分割；

    image-20240706155215166

CLI方式

  • 在webpack5的文檔中已經沒有了==–module-bind==；
  • 實際應用中也比較少使用，因為不方便管理；

9.4、loader配置方式

配置方式表示的意思是在我們的webpack.config.js文件中寫明配置信息：

  • module.rules中允許我們配置多個loader（因為我們也會繼續使用其他的loader，來完成其他文件的加載）；
  • 這種方式可以更好的表示loader的配置，也方便后期的維護，同時也讓你對各個Loader有一個全局的概覽；

module.rules的配置如下：

  • rules屬性對應的值是一個數組：[Rule]

  • 數組中存放的是一個個的Rule，Rule是一個對象，對象中可以設置多個屬性：

    • ==test屬性：==用于對 resource（資源）進行匹配的，通常會設置成正則表達式；
    • ==use屬性：==對應的值時一個數組：[UseEntry]
      • UseEntry是一個對象，可以通過對象的屬性來設置一些其他屬性
        • loader：必須有一個 loader屬性，對應的值是一個字符串；
        • options：可選的屬性，值是一個字符串或者對象，值會被傳入到loader中；
        • query：目前已經使用options來替代；
      • 傳遞字符串（如：use: [ ‘style-loader’ ]）是 loader 屬性的簡寫方式（如：use: [ { loader: ‘style-loader’} ]）；
    • loader屬性： Rule.use: [ { loader } ] 的簡寫。

image-20240706155827920

測試后發現，我們打包后的css并沒有生效，怎么解決？

9.5、認識style-loader

我們已經可以通過css-loader來加載css文件了

  • 但是你會發現這個css在我們的代碼中并沒有生效（頁面沒有效果）。

這是為什么呢？

  • 因為css-loader只是負責將.css文件進行解析，并不會將解析之后的css插入到頁面中；
  • 如果我們希望再完成插入style的操作，那么我們還需要另外一個loader，就是style-loader；

安裝style-loader：

npm install style-loader -D

9.6、配置style-loader

那么我們應該如何使用style-loader：

  • 在配置文件中，添加style-loader；

  • 注意：因為loader的執行順序是從右向左（或者說從下到上，或者說從后到前的），所以我們需要將style-loader寫到css-loader的前面；

    image-20240706162656866

  • 重新執行編譯npm run build，可以發現打包后的css已經生效了：

    • 當前目前我們的css是通過頁內樣式的方式添加進來的；
    • 后續我們也會講如何將css抽取到單獨的文件中，并且進行壓縮等操作；

css-loader跟style-loader都是開發時依賴，所以我們加-D

9.7、配置插件的簡寫方式

const path = require("path")module.exports = {entry: "./src/main.js",output: {filename: "bundle.js",//寫成配置的話一定要寫成絕對路徑 //否則會提示:-configuration.output.path：The provided value "./build" is not an absolute path!//_dirname,當前文件webpack.config.js所在的路徑path: path.resolve(__dirname, "./build")},//完整寫法// module:{//   rules:[//     {//       //告訴webpack配置什么樣的文件//       test:"/\.css$/",//       use:[ //use中多個loader的使用順序是從后往前 //         {loader:"style-loader"},//         {loader:"css-loader"},//         {loader:"css-loader",options:{}}//       ]//     }//   ] // }//簡寫一:如果loader只有一個,不寫use// module:{//   rules:[//     {//       //告訴webpack配置什么樣的文件//       test:"/\.css$/",//       loader:"css-loader"//     }//   ] // }//簡寫二:多個loader不需要其他屬性時,可以直接寫loader字符傳形式// module:{//   rules:[//     {//       //告訴webpack配置什么樣的文件//       test:"/\.css$/",//       use:["style-loader","css-loader"]  //     }//   ] // }//目前截斷我們使用的這種方式并沒有將css抽取成一個css文件用link的方式導入//而是用style標簽的方式導入的css樣式,如果想要抽取成一個文件，我們需要用到webpack文件的高級特性}

9.8、如何處理less文件

在我們開發中，我們可能會使用less、sass、stylus的預處理器來編寫css樣式，效率會更高。

那么，如何可以讓我們的環境支持這些預處理器呢？

  • 首先我們需要確定，less、sass等編寫的css需要通過工具轉換成普通的css；

比如我們編寫如下的less樣式：

image-20240706165416283

我們需要借用Less工具處理

  • 我們可以使用less工具來完成它的編譯轉換：

    npm install less -D

  • 執行如下命令：

    npx lessc ./src/css/title.less title.css

這種方式只能處理單個或者多個less文件，我們怎么讓他可以進行自動轉換

9.1、less-loader處理

但是在項目中我們會編寫大量的css，它們如何可以自動轉換呢？

  • 這個時候我們就可以使用less-loader，來自動使用less工具轉換less到css；

    npm install less-loader -D

配置webpack.config.js

image-20240706165936643

9.2、如何處理sass文件

很好的一個開發的文檔

https://cloud.tencent.com/developer/section/1477538

區分node-sass和sass的區別

https://blog.csdn.net/feiying0canglang/article/details/126372260

快速開始

npm install sass-loader sass webpack --save-dev

將 sass-loader 、css-loader 與 style-loader 進行鏈式調用，可以將樣式以 style 標簽的形式插入 DOM 中，或者使用 mini-css-extract-plugin 將樣式輸出到獨

立的文件中。

app.js

import './style.scss';

style.scss

$body-color: red;body {color: $body-color;
}

webpack.config.js

module.exports = {module: {rules: [{test: /\.s[ac]ss$/i,use: [// 將 JS 字符串生成為 style 節點'style-loader',// 將 CSS 轉化成 CommonJS 模塊'css-loader',// 將 Sass 編譯成 CSS'sass-loader',],},],},
};

啟動我們的webpack完成操作

9.3、關于sass怎么導入node_modules里的sass文件

在Sass和Webpack的環境中，使用@import指令來導入其他Sass文件或模塊是非常常見的。然而，當涉及到從node_modules中導入第三方庫的Sass文件時，事情就變得稍微復雜一些。這里，~符號的作用就體現出來了。

1、什么是~符號？

在Sass中直接使用@import "bootstrap"這樣的語句時，Sass編譯器會嘗試在當前文件所在的目錄及其子目錄中查找bootstrap文件。如果找不到，它不會自動去node_modules目錄下查找。但是，當我們使用@import "~bootstrap"時，我們實際上是告訴Webpack（而不是Sass編譯器）去node_modules目錄下查找bootstrap。

2、~符號的使用場景

當你在項目中使用了像Bootstrap這樣的外部Sass庫，并且想要在你的Sass文件中導入它們的樣式時，~符號就是必要的。這是因為Bootstrap（或其他庫）的Sass文件位于node_modules目錄下，而默認情況下，Sass的@import指令不會去那里查找文件。

3、為什么可以移除~？

隨著Webpack和Sass-loader的改進，它們現在能夠更好地協同工作，理解@import指令，并在必要時自動查找node_modules目錄。這意味著，即使你不使用~，只要Webpack配置正確，它仍然可以識別出你試圖從node_modules中導入一個庫。因此，現代的配置通常推薦去掉~，使得Sass代碼更加干凈和易于閱讀。

4、總結

  • ~符號最初被引入是為了明確告訴Webpack在node_modules中查找庫文件。
  • 現代的Webpack和Sass-loader配置已經足夠智能，能夠自動處理node_modules中的導入，因此~不再是必需的。
  • 移除~可以使你的Sass代碼更加簡潔，減少潛在的混亂。

然而，盡管推薦移除~，Webpack和Sass-loader仍然會支持它的使用，以保持向后兼容性。如果你在舊項目中看到~的使用，不必驚慌，它仍然是有效的，只是現代的最佳實踐中不再推薦這樣做。

9.4、認識PostCSS工具

什么是PostCSS呢？

  • PostCSS是一個通過JavaScript來轉換樣式的工具；
  • 這個工具可以幫助我們進行一些CSS的轉換和適配，比如自動添加瀏覽器前綴、css樣式的重置；
  • 但是實現這些功能，我們需要借助于PostCSS對應的插件；

如何使用PostCSS呢？主要就是兩個步驟：？

  • 第一步：查找PostCSS在構建工具中的擴展，比如webpack中的postcss-loader；
  • 第二步：選擇可以添加你需要的PostCSS相關的插件；

9.5、postcss-loader

我們可以借助于構建工具：

  • 在webpack中使用postcss就是使用postcss-loader來處理的；

我們來安裝postcss-loader： 一定得先安裝postcss-loader這個工具

  • npm install postcss-loader -D

我們修改加載css的loader：（配置文件已經過多，給出一部分了）

  • 注意：因為postcss需要有對應的插件才會起效果，所以我們需要配置它的plugin；

image-20240706180938103

安裝autoprefixer工具

npm i autoprefixer

9.6、單獨的postcss配置文件

因為我們需要添加前綴，所以要安裝autoprefixer：

npm install autoprefixer -D

我們可以將這些配置信息放到一個單獨的文件中進行管理：

  • 在根目錄下創建postcss.config.js

image-20240706181312550

9.7、postcss-preset-env預設

事實上，在配置postcss-loader時，我們配置插件并不需要使用autoprefixer。

我們可以使用另外一個插件：postcss-preset-env

  • postcss-preset-env也是一個postcss的插件；
  • 它可以幫助我們將一些現代的CSS特性，轉成大多數瀏覽器認識的CSS，并且會根據目標瀏覽器或者運行時環境添加所需的polyfill；
  • 也包括會自動幫助我們添加autoprefixer（所以相當于已經內置了autoprefixer）；

首先，我們需要安裝postcss-preset-env：

npm install postcss-preset-env -D

之后，我們直接修改掉之前的autoprefixer即可：

image-20240706182406036

注意：我們在使用某些postcss插件時，也可以直接傳入字符串

image-20240706182422225

總結：轉特性顏色有#號格式轉換為RGBA格式，加瀏覽器前綴等

postcss這個工具非常強大、后續的px轉各種單位rem/vw/vh都可以下載插件進行配置

9.8、Webpack重要性總結

我們剛才了解的postcss是一個獨立的工具，我們可以脫離webpack進行使用，剛才我們學了好多的loader,學習了一堆的配置，很多很雜，我覺得根本記不住，

配來配去的很容易亂,我們在開發當中并不會配置這些繁雜的東西，在真實的開發過程中，我們都是利用腳手架進行開發，腳手架里面把這些該配置的東西全部都幫

你配置好了，所以你可以直接在腳手架的基礎上進行開發的，學習這個東西的目的是理解整個這個流程，目前前端的這個項目到底是如何跑起來的

也包括幫住你理解以前在學習css的時候，我說過一句話，我們現在的開發模式中我們根本不需要手動的添加瀏覽器前綴,以前你可能很疑惑，我不加這個瀏覽器

前綴以后怎么辦呢？那有些瀏覽器需要適配的話那我怎么適配呢？我們現在就借助webpack配置postcss工具來進行加前綴的轉換。是一個自動化的過程

現在的前端開發，更加的提倡四個現代化：模塊化、組件化、規范化、自動化，關于這四個現代化在講webpack之初我已經介紹過了，忘記了往前翻。

所以總的來說，webpack這個工具是非常的屌。

前邊的loader我們去講的如何處理css類型的文件，下邊我們學習的是處理image圖片資源、怎么處理Es5轉Es6的js代碼、怎么處理Vue組件轉html。

9.9、Webpack打包圖片資源

從新建立一個工程、導入倆文件、按照模塊化的方式引入圖片資源、把他放到圖片標簽的src屬性上、最后打包–>發現報錯，

image-20240707010155003

為什么？因為沒有對應的處理器？我們首先想到的是下載對應的loader,在早期的時候我們使用的loader為 npm insetall file-loader.早期的時候確實需要借助于這

個loader,但是在最新版本的webpack中對于文件的處理，現在的webpack已經內置了，以前的時候webpack是沒有內置的，既然已經內置了為什么在運行的時候

還會報錯？這是因為webpack默認把所有模塊按照js模塊的方式來進行處理的，也就是webpack不清楚我要按照那種格式去處理.

配置格式

const path = require("path")module.exports = {entry: "./src/index.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build")},module: {rules:[{ test:/\.css$/,use:["style-loader","css-loader", "postcss-loader"] },{test:/\.less$/,use:["style-loader","css-loader","less-loader", "postcss-loader"] },{test:/\.(png|jpe?g|svg|gif)$/,type:"asset"}] }
}

9.1、認識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 發送一個單獨的文件并導出 URL。

? 之前通過使用 file-loader 實現；

? asset/inline 導出一個資源的 data URI。

? 之前通過使用 url-loader 實現；

? asset/source 導出資源的源代碼

? 之前通過使用 raw-loader 實現；

? asset 在導出一個 data URI 和發送一個單獨的文件之間自動選擇。

? asset 在導出一個 data URI 和發送一個單獨的文件之間自動選擇。

9.2、asset module type的使用

那么具體的asset/resource、asset/inline、asset/source、asset有什么區別呢？

如果是asset/resource,那么在打包的過程當中就把圖片完成的給打包進了build目錄了，底層做的事情就相當于一個復制，然后把url給設置了進去

如果是asset/inline那么在打包的時候就對圖片進行base64的編碼，然后把這個base64字符串放進去，編碼的好處是，會減少網絡請求、當然也有一定的壞處，資源越大編碼的長度就非常大，相應的js文件也會變大。這會導致瀏覽器下載解析js文件過慢，但是一般我們都是做相應的取舍，小圖片編碼，大圖片我們還是進行復制打包。顯然前者都不能滿足，

asset/source是把資源導出為源代碼的形式，你像我們這個圖片他本身就是二進制的，你拿到一個二進制的文件，本身來說沒有太大的意義，因為畢竟不是要自己對這個文件做解碼，如果要是自己需要對文件做解碼，你就需要拿到這個源代碼，但是我們一般是不需要自己去做解碼的，這個工作通常都是瀏覽器去做

如果想要達到，大的打包，小的編碼這種效果，必須采用asset參數、設置對應的參數limit,來規定，多大算大，多小算小

9.3、url-loader的limit效果？

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

? 這是因為小的圖片轉換base64之后可以和頁面一起被請求，減少不必要的請求過程；

? 而大的圖片也進行轉換，反而會影響頁面的請求速度；

我們需要兩個步驟來實現：

? 步驟一：將type修改為asset；

? 步驟二：添加一個parser屬性，并且制定dataUrl的條件，添加maxSize屬性；

? image-20240713172314683

9.4、如何可以自定義文件的輸出路徑和文件名呢？

經過打包之后，發現打包后圖片的名字，名字變了，我們并不能確定這個圖片是打包前的那張圖片，所以我想定制這個打包后圖片的名字，怎么做？

image-20240713173350144

方式一：修改output，添加assetModuleFilename屬性；

方式二：在Rule中，添加一個generator屬性，并且設置filename；

image-20240713174324620

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

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

其實就是用占位符去處理，找到特定的字符串按照某種規則替換或者生成拼接。

const path = require("path")module.exports = {entry: "./src/index.js",output: {filename: "bundle.js",path: path.resolve(__dirname, "./build"),//方式一：assetModulFilename:"img/[name].[hash:6][ext]"},module: {rules:[{ test:/\.css$/,use:["style-loader","css-loader", "postcss-loader"] },{test:/\.less$/,use:["style-loader","css-loader","less-loader", "postcss-loader"] },{test:/\.(png|jpe?g|svg|gif)$/,type:"asset",//方式二generator:{//占位符//name：指向原來的圖片名稱//ext:拓展名//hash: webpack按照某種規格生成的hashfilename:"image/[name].[hash:6][ext]"},//limit效果，根據圖片不同的大小進行不同的處理1、小的編碼成base64,大的打包parser:{dataUrlCondition:{maxSize:100*1024}}}] }
}

9.5、為什么需要babel？

前面我們介紹了如何去打包css、less、sass、圖片等資源下邊我們需要學習如何打包js文件、有些同學就很奇怪了，不是一開始說，webpack不是都默認去處理js文件了嘛，那為啥還要去講這個東西？我們觀察意見的打包文件會發現，打包確實成功了，代碼也進行了丑化，但是es6的代碼并沒有進行轉es5的操作，你還是能看到箭頭函數和const的身影、但是有些瀏覽器恰恰就不支持es6語法，所以我們需要利用webpack配置一些插件對js進行再次處理

image-20240713185437746

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

? 開發中，我們想要使用ES6+的語法，想要使用TypeScript，開發React項目，它們都是離不開Babel的；

? 所以，學習Babel對于我們理解代碼從編寫到線上的轉變過程至關重要；

那么，Babel到底是什么呢？

? Babel是一個工具鏈，主要用于舊瀏覽器或者環境中將ECMAScript 2015+代碼轉換為向后兼容版本的JavaScript；

? 包括：語法轉換、源代碼轉換等；

image-20240713185809454

9.6、Babel命令行使用？

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

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

? @babel/core：babel的核心代碼，必須安裝；

? ==@babel/cli：==可以讓我們在命令行使用babel；

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

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

? src：是源文件的目錄；

? --out-dir：指定要輸出的文件夾dist；

npx babel src --out-dir dist

9.7、Babel插件的使用？

我們使用postcss的時候，也是裝上那個工具然后配置插件、同樣的Babel也是一個工具，你要想達到某種目的也需要配置插件

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

? npm install @babel/plugin-transform-arrow-functions -D

? npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions

查看轉換后的結果：我們會發現 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

9.8、Babel的預設preset？

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

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

安裝@babel/preset-env預設：

? npm install @babel/preset-env -D

執行如下命令：

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

9.1、babel-loader？

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

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

? npm install babel-loader -D

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

image-20240713193227422

配置這完成這個loader,我們還需要配置對應的插件、這個東西跟postcss那個工具一樣，光指明他是沒用的，我們還需要配置對應的插件

剛才我們測試不借助webpack，使用命令行的方式來用Babel我們一共下載過兩個插件分別是

? 處理箭頭函數的插件

? npm install @babel/plugin-transform-arrow-functions -D

? 處理變量類型的插件

? npm install @babel/plugin-transform-block-scoping -D

我們需要告訴babel來使用這倆插件(這個可以直接配置到webpack這個文件中–內部化配置)

{test:'/\.m?js$',use:{loader:"babel-loader"options:{plugins:["@babel/plugin-transform-arrow-functions""@babel/plugin-transform-block-scoping"]}}    
}

9.2、babel配置文件抽取?

關于babel插件的配置插件你可以配置到webpack的配置文件中、當然也可以抽取一個單獨的文件

Babel配置文件通常是一個名為==.babelrc的文件，或者是babel.config.js==。以下是一個基本的.babelrc配置文件示例，

module.exports = {plugins:["@babel/plugin-transform-arrow-functions""@babel/plugin-transform-block-scoping"]
};

9.3、babel-preset預設環境？

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

比如常見的預設有三個：

  • env
  • react
  • TypeScript

安裝preset-env：

image-20240713195334355

外部配置文件配置預設環境

module.exports = {//預設環境配置了就不用在配置這個插件了  plugins:["@babel/plugin-transform-arrow-functions""@babel/plugin-transform-block-scoping"]//配置預設環境   presets:[["@babel/preset-env"]]   
};

9.4、webpack處理Vue文件？

本來不打算先講關于Vue的東西、但是提前講這個的話，可以為自己后期學Vue做一定的知識鋪墊，那么webpack到底是怎么處理這個Vue的文件呢？可能有些人到這里還沒有學習過Vue的一些語法，不用著急后面的話會非常詳細去刨析這個Vue

白居易的琵琶行

千呼萬喚始出來，猶抱琵琶半遮面。轉軸撥弦三兩聲，未成曲調先有情。

我們現在，在示例項目中已經寫了非常多的文件代碼，但是項目結構看起來非常的亂，但是真是開發中，我們并不會這么做，通常都是采用某種腳手架來進行快速開發、其實不管什么框架最終的話都是展現為 HTML+CSS+JavaScript,一切的一切都是在加速開發。

我們觀察打包好后的文件，東西真的非常的多，一個js文件塞了那么多東西，因為我們引入了Vue,所以不僅僅只是打包了我們自己些的代碼Vue的代碼也會打包進去這個不用擔心后期我們學習webpack高級的時候會做分包處理

實戰測試

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

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

下載安裝Vue依賴：npm i vue

image-20240713221643608

所謂的處理我們書寫的Vue文件，首先我們需要把這個Vue文件加入到Webpack的依賴圖中，加入依賴圖成功后在打包

image-20240713221824706

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

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

npm install vue-loader -D

在webpack的模板規則中進行配置：

image-20240713221917752

9.5、@vue/compiler-sfc

在編寫Vue代碼前我們通過 npm i Vue 來安裝了Vue，所以這個插件自然而然就被裝上了，如果沒有安裝過Vue,你可以先安裝這個

? npm install @vue/compiler-sfc -D

但是我們測試的時候可能會一個錯

image-20240713222546571

這是因為我們少配置了一個插件

image-20240713222613737

image-20240713222619189

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

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

9.6、resolve模塊解析

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

  • 在開發中我們會有各種各樣的模塊依賴，這些模塊可能來自于自己編寫的代碼，也可能來自第三方庫；

  • resolve可以幫助webpack從每個 require/import 語句中，找到需要引入到合適的模塊代碼；

  • webpack 使用 enhanced-resolve 來解析文件路徑；

webpack能解析三種文件路徑：

  • 絕對路徑
    • 由于已經獲得文件的絕對路徑，因此不需要再做進一步解析。
  • 相對路徑（相對路徑最后也會被拼接成一個絕對路徑）
    • 在這種情況下，使用 import 或 require 的資源文件所處的目錄，被認為是上下文目錄；
    • 在 import/require 中給定的相對路徑，會拼接此上下文路徑，來生成模塊的絕對路徑；
  • 模塊路徑（直接跟是一個Vue,根據modules屬性來決定是那個文件夾查找的，這也是為啥會去找node_modules,因為默認值就是他）
    • 在 resolve.modules中指定的所有目錄檢索模塊；
      • 默認值是 [‘node_modules’]，所以默認會從node_modules中查找文件；
    • 我們可以通過設置別名的方式來替換初識模塊路徑，具體后面講解alias的配置；

上述我們在測試那個Vue文件打包時，我們在導入Vue組件時，我們明確的書寫了Vue文件的后綴，這是為什么呢？在webpack中我們通過resolve這個設置，來設置模塊如何被解析的，在開發過程中我們可能會有各種各樣的模塊依賴，有可能時我們自己編寫的代碼也有可能來自第三方庫，resolve可以幫助啊webpack從每個require/import語句中找到需要引入的模塊代碼，webpack底層時怎么做的就是利用enhanced-resolve這個庫來解決這個問題的

9.8、解析的過程中具體會如何操作呢？

如果是一個文件：

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

比如我導入了一個 import utils from './utils/format.js’帶拓展名了直接就幫我們找到這個文件了，如果我們些的是一個format,require,會自動往后邊拼接，.js .json .node,但是webpack是怎么做的呢？如果沒有跟上我們的后綴名，那么他是根據resolve.extensions的選項來作為文件拓展名解析的

如果是一個文件夾：

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

9.1、具體怎么配置extensions和alias

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

? 默認值是 [‘.wasm’, ‘.mjs’, ‘.js’, ‘.json’]；

? 所以如果我們代碼中想要添加加載 .vue 或者 jsx 或者 ts 等文件時，我們必須自己寫上擴展名；

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

? 特別是當我們項目的目錄結構比較深的時候，或者一個文件的路徑可能需要 …/…/…/這種路徑片段；

我們可以給某些常見的路徑起一個別名；

image-20240713225212559

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/44811.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/44811.shtml
英文地址，請注明出處：http://en.pswp.cn/web/44811.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

速盾：ddos高防ip哪里好用？

速盾：ddos高防ip哪里好用？

隨著互聯網的飛速發展，DDoS攻擊問題逐漸突出。DDoS攻擊是一種通過在網絡上創建大量請求，使目標網絡或服務器過載而無法正常工作的攻擊方式。為了應對DDoS攻擊，提高網絡的安全性和穩定性，使用高防IP成為了一種常見的解決辦法。 DD…
閱讀更多...
Flower花所比特幣交易及交易費用科普

Flower花所比特幣交易及交易費用科普

在加密貨幣交易中，選擇一個可靠的平臺至關重要。Flower花所通過提供比特幣交易服務脫穎而出。本文將介紹在Flower花所進行比特幣交易的基礎知識及其交易費用。 什么是Flower花所？ Flower花所是一家加密貨幣交易平臺，為新手和資深交易者提供…
閱讀更多...
【C++】開源：drogon-web框架配置使用

【C++】開源：drogon-web框架配置使用

😏★,:.☆(￣▽￣)/$:.★ 😏 這篇文章主要介紹drogon-web框架配置使用。 無專精則不能成，無涉獵則不能通。——梁啟超 歡迎來到我的博客，一起學習，共同進步。 喜歡的朋友可以關注一下，…
閱讀更多...
Linux系統編程-線程同步詳解

Linux系統編程-線程同步詳解

線程同步是指多個線程協調工作，以便在共享資源的訪問和操作過程中保持數據一致性和正確性。在多線程環境中，線程是并發執行的，因此如果多個線程同時訪問和修改共享資源，可能會導致數據不一致、競態條件（race condition…
閱讀更多...
面試題008-Java-SpringBoot

面試題008-Java-SpringBoot

面試題008-Java-SpringBoot 目錄 面試題008-Java-SpringBoot題目自測題目答案1. Spring 和 Spring Boot有什么區別？2. Spring Boot 的主要優點是什么？3. 什么是Spring Boot Starter？4. 介紹一下SpringBootApplication注解？5. Spri…
閱讀更多...
【密碼學】消息認證

【密碼學】消息認證

你發送給朋友一條消息（內容：明天下午來我家吃飯），這一過程中你不想讓除你朋友以外的人看到消息的內容，這就叫做消息的機密性，用來保護消息機密性的方式被叫做加密機制。 現在站在朋友的視角，某一…
閱讀更多...
使用PyQt5實現添加工具欄、增加SwitchButton控件

使用PyQt5實現添加工具欄、增加SwitchButton控件

前言：通過在網上找到的“電池電壓監控界面”，學習PyQt5中添加工具欄、增加SwitchButton控件，在滑塊控件右側增加文本顯示、設置界面背景顏色、修改文本控件字體顏色等。 1. 上位機界面效果展示 網絡上原圖如下： 自己使用PyQt5做…
閱讀更多...
springboot異常（一）：springboot自定義全局異常處理

springboot異常（一）：springboot自定義全局異常處理

🌷1. 自定義一個異常類 自定義一個異常，有兩個變量異常代碼、異常消息，定義了兩個構造方法，一個無參構造方法，一個所有參數構造方法。 在構造方法中要掉用父類的構造方法，主要目的是在日志或控制臺打印異…
閱讀更多...
【Linux】多線程_3

【Linux】多線程_3

文章目錄 九、多線程3. C11中的多線程4. 線程的簡單封裝 未完待續 九、多線程 3. C11中的多線程 Linux中是根據多線程庫來實現多線程的，C11也有自己的多線程，那它的多線程又是怎樣的？我們來使用一些C11的多線程。 Makefile： te…
閱讀更多...
Linux - 探索命令行

Linux - 探索命令行

探索命令行 Linux命令行中的命令使用格式都是相同的: 命令名稱 參數1 參數2 參數3 ...參數之間用任意數量的空白字符分開. 關于命令行, 可以先閱讀一些基本常識. 然后我們介紹最常用的一些命令: ls用于列出當前目錄(即"文件夾")下的所有文件(或目錄). 目錄會用藍色…
閱讀更多...
面試經典題型：調用HashMap的put方法的具體執行流程

面試經典題型：調用HashMap的put方法的具體執行流程

在調用put方法時時，有幾個關鍵點需要考慮： 哈希沖突的發生與解決： 哈希沖突指不同的鍵通過哈希函數計算得到相同的哈希值，導致它們應該存放在哈希表的同一個位置。解決沖突的常用方法包括開放尋址法和鏈表法（或其升級形…
閱讀更多...
CSIP-FTE考試專業題

CSIP-FTE考試專業題

靶場下載鏈接： https://pan.baidu.com/s/1ce1Kk0hSYlxrUoRTnNsiKA?pwdha1x pte-2003密碼：admin123 centos:root admin123 解壓密碼： PTE考試專用 下載好后直接用vmware打開，有兩個靶機，一個是基礎題&#x…
閱讀更多...
【CTF-Crypto】數論基礎-02

【CTF-Crypto】數論基礎-02

【CTF-Crypto】數論基礎-02 文章目錄 【CTF-Crypto】數論基礎-021-16 二次剩余1-20 模p下-1的平方根*1-21 Legendre符號*1-22 Jacobi符號*2-1 群*2-2 群的性質2-3 阿貝爾群*2-4 子群2-11 群同態2-18 原根2-21 什么是環2-23 什么是域2-25 子環2-26 理想2-32 多項式環 1-16 二次剩…
閱讀更多...
打造智慧校園德育管理，提升學生操行基礎分

打造智慧校園德育管理，提升學生操行基礎分

智慧校園的德育管理系統內嵌的操行基礎分功能，是對學生日常行為規范和道德素養進行量化評估的一個創新實踐。該功能通過將抽象的道德品質轉化為具體可量化的指標，如遵守紀律、尊師重道、團結協作、愛護環境及參與集體活動的積極性等，為每個學…
閱讀更多...
醫療器械FDA |FDA網絡安全測試具體內容

醫療器械FDA |FDA網絡安全測試具體內容

醫療器械FDA網絡安全測試的具體內容涵蓋了多個方面，以確保醫療器械在網絡環境中的安全性和合規性。以下是根據權威來源歸納的FDA網絡安全測試的具體內容： 一、技術文件審查 網絡安全計劃：制造商需要提交網絡安全計劃，詳細描述產…
閱讀更多...
Matlab【光伏預測】基于雪融優化算法SAO優化高斯過程回歸GPR實現光伏多輸入單輸出預測附代碼

Matlab【光伏預測】基于雪融優化算法SAO優化高斯過程回歸GPR實現光伏多輸入單輸出預測附代碼

% 光伏預測 - 基于SAO優化的GPR % 數據準備 % 假設有多個輸入特征 X1, X2, …, Xn 和一個目標變量 Y % 假設數據已經存儲在 X 和 Y 中，每個變量為矩陣，每行表示一個樣本，每列表示一個特征 % 參數設置 numFeatures size(X, 2); % 輸入特征的…
閱讀更多...
Spring Boot集成easyposter快速入門Demo

Spring Boot集成easyposter快速入門Demo

1.什么是easyposter？ easyposter是一個簡單的,便于擴展的繪制海報工具包 使用場景 在日常工作過程中，通常一些C端平臺會伴隨著海報生成與分享業務。因為隨著移動互聯網的迅猛發展，社交分享已成為我們日常生活的重要組成部分。海報分享作為…
閱讀更多...
visual studio 2019版下載以及與UE4虛幻引擎配置（過程記錄）（官網無法下載visual studio 2019安裝包）

visual studio 2019版下載以及與UE4虛幻引擎配置（過程記錄）（官網無法下載visual studio 2019安裝包）

一、概述 由于需要使用到UE4虛幻引擎，我使用的版本是4.27版本的，其官方默認的visual studio版本是2019版本的，相應的版本對應關系可以通過下面的官方網站對應關系查詢。https://docs.unrealengine.com/4.27/zh-CN/ProductionPipelines/Develo…
閱讀更多...
MMSegmentation筆記

MMSegmentation筆記

如何訓練自制數據集？ 首先需要在 mmsegmentation/mmseg/datasets 目錄下創建一個自制數據集的配置文件，以我的蘋果葉片病害分割數據集為例，創建了mmsegmentation/mmseg/datasets/appleleafseg.py 可以看到，這個配置文件主要定義…
閱讀更多...
python:使用matplotlib庫繪制圖像（四）

python:使用matplotlib庫繪制圖像（四）

作者是跟著http://t.csdnimg.cn/4fVW0學習的，matplotlib系列文章是http://t.csdnimg.cn/4fVW0的自己學習過程中整理的詳細說明版本，對小白更友好哦！ 四、條形圖 1. 一個數據樣本的條形圖 條形圖：常用于比較不同類別的數量或值&…
閱讀更多...
最新文章

Copyright @ 2022~2023