webpack相關(guān)

項(xiàng)目使用webpack流程

1. 進(jìn)入一個(gè)初始化好的vue項(xiàng)目
2. 下載安裝webpack相關(guān)依賴包/插件
   1. npm install --save-dev webpack webpack-cli webpack-dev-server
   2. 安裝一些相關(guān)的loader,比如vue-loader，babel-loader，css-loader等
3. 創(chuàng)建webpack.config.js文件，進(jìn)行相關(guān)配置
4. 文件內(nèi)容如下

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development', // 設(shè)置為開發(fā)模式
  entry: './src/main.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 輸出目錄
    filename: 'bundle.js', // 輸出文件名
    publicPath: '/dist/' // 公共路徑
  },
  module: {
    rules: [
      {
        test: /\.vue$/, // 處理.vue文件
        loader: 'vue-loader'
      },
      {
        test: /\.js$/, // 處理.js文件
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.css$/, // 處理.css文件
        use: ['vue-style-loader', 'css-loader']
      },
      {
        test: /\.(png|jpe?g|gif)$/i, // 處理圖片文件
        use: [
          {
            loader: 'file-loader',
            options: {
              outputPath: 'images' // 輸出目錄
            }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'], // 解析文件擴(kuò)展名
    alias: {
      'vue$': 'vue/dist/vue.esm.js', // 指定Vue版本
      '@': path.resolve(__dirname, 'src') // 設(shè)置@符號(hào)指向src目錄
    }
  },
  plugins: [
    new VueLoaderPlugin() // Vue Loader插件
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'public'), // 設(shè)置服務(wù)器根目錄
    publicPath: '/dist/', // 公共路徑
    port: 8080, // 端口號(hào)
    open: true // 自動(dòng)打開瀏覽器
  }
};

1.webpack的構(gòu)建流程

1. 初始化參數(shù)：從配置?件和 Shell 語(yǔ)句中讀取與合并參數(shù)，得出最終的參數(shù)；
2. 開始編譯：?上?步得到的參數(shù)初始化 Compiler 對(duì)象，加載所有配置的插件，執(zhí)?對(duì)象的 run ?法開始執(zhí)?編譯；
3. 確定??：根據(jù)配置中的 entry 找出所有的???件；
4. 編譯模塊：從???件出發(fā)，調(diào)?所有配置的 Loader 對(duì)模塊進(jìn)?翻譯，再找出該模塊依賴的模塊，再遞歸本步驟直到所有??依賴的?件都經(jīng)過(guò)了本步驟的處理；
5. 完成模塊編譯：在經(jīng)過(guò)第4步使? Loader 翻譯完所有模塊后，得到了每個(gè)模塊被翻譯后的最終內(nèi)容以及它們之間的依賴關(guān)系；
6. 輸出資源：根據(jù)??和模塊之間的依賴關(guān)系，組裝成?個(gè)個(gè)包含多個(gè)模塊的 Chunk，再把每個(gè) Chunk 轉(zhuǎn)換成?個(gè)單獨(dú)的?件加?到輸出列表，這步是可以修改輸出內(nèi)容的最后機(jī)會(huì)；
7. 輸出完成：在確定好輸出內(nèi)容后，根據(jù)配置確定輸出的路徑和?件名，把?件內(nèi)容寫?到?件系統(tǒng)。

2.webpack的優(yōu)勢(shì)

webpack適?于?型復(fù)雜的前端站點(diǎn)構(gòu)建:

webpack有強(qiáng)?的loader和插件?態(tài),打包后的?件實(shí)際上就是?個(gè)?即執(zhí)?函數(shù)，這個(gè)?即執(zhí)?函數(shù)接收?個(gè)參數(shù)，這個(gè)參數(shù)是模塊對(duì)象，鍵為各個(gè)模塊的路徑，值為模塊內(nèi)容。?即執(zhí)?函數(shù)內(nèi)部則處理模塊之間的引?，執(zhí)?模塊等,這種情況更適合?件依賴復(fù)雜的應(yīng)?開發(fā)。

3.webpack的熱更新是怎么做的

Webpack的熱更新（Hot Module Replacement，HMR）是一項(xiàng)功能，它允許在不刷新整個(gè)頁(yè)面的情況下替換、添加或刪除模塊。這使得開發(fā)者可以在保持應(yīng)用程序狀態(tài)的同時(shí)進(jìn)行快速的開發(fā)和調(diào)試。

1. 運(yùn)行時(shí)更新模塊：

   • 當(dāng)Webpack監(jiān)聽到源代碼發(fā)生變化時(shí)，它會(huì)在后臺(tái)重新編譯修改過(guò)的模塊，但并不會(huì)重新加載整個(gè)頁(yè)面。
   • 更新的模塊以及其依賴項(xiàng)會(huì)被標(biāo)記為"熱"（hot）。

2. 模塊熱替換（Hot Module Replacement）：

   • 當(dāng)新的模塊編譯完成后，Webpack會(huì)使用WebSocket或者XHR等方式通知在運(yùn)行時(shí)的應(yīng)用程序。
   • 應(yīng)用程序會(huì)接收到這些更新，并通過(guò)一種叫做"熱更新中間件"的工具來(lái)處理這些更新。

3. 應(yīng)用程序響應(yīng)更新：

   • 應(yīng)用程序會(huì)根據(jù)更新的類型（替換、添加或刪除模塊）來(lái)執(zhí)行相應(yīng)的操作。
   • 替換模塊時(shí)，應(yīng)用程序會(huì)盡可能保留當(dāng)前模塊的狀態(tài)，例如組件的狀態(tài)或者頁(yè)面的滾動(dòng)位置。
   • 如果一個(gè)模塊無(wú)法熱更新，那么整個(gè)頁(yè)面就會(huì)被重新加載。

4. 完成熱更新：

   • 一旦應(yīng)用程序完成更新，它會(huì)發(fā)送一個(gè)消息給Webpack，告訴Webpack熱更新已經(jīng)完成。
   • 在完成更新之后，Webpack會(huì)重新編譯其他模塊，以確保它們與最新的代碼保持同步。

4.webpack的性能優(yōu)化是怎么做的

?webpack優(yōu)化前端性能是指優(yōu)化webpack的輸出結(jié)果，讓打包的最終結(jié)果在瀏覽器運(yùn)?快速?效。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-837943.html

• 壓縮代碼：刪除多余的代碼、注釋、簡(jiǎn)化代碼的寫法等等?式?？梢岳?webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 來(lái)壓縮JS?件， 利? cssnano （css-loader?minimize）來(lái)壓縮css

• 利?CDN加速: 在構(gòu)建過(guò)程中，將引?的靜態(tài)資源路徑修改為CDN上對(duì)應(yīng)的路徑。可以利?webpack對(duì)于 output 參數(shù)和各loader的 publicPath 參數(shù)來(lái)修改資源路徑

• Tree Shaking: 將代碼中永遠(yuǎn)不會(huì)?到的?段刪除掉?？梢酝ㄟ^(guò)在啟動(dòng)webpack時(shí)追加參數(shù) --optimize-minimize 來(lái)實(shí)現(xiàn)

• Code Splitting: 將代碼按路由維度或者組件分塊(chunk),這樣做到按需加載,同時(shí)可以充分利?瀏覽器緩存

• 提取公共第三?庫(kù): SplitChunksPlugin插件來(lái)進(jìn)?公共模塊抽取,利?瀏覽器緩存可以?期緩存這些?需頻繁變動(dòng)的公共代碼

5.webpack treeShaking機(jī)制的原理

• treeShaking也叫搖樹優(yōu)化，是一種通過(guò)移除多于代碼，來(lái)優(yōu)化打包體積的，生產(chǎn)環(huán)境默認(rèn)開啟。
• 可以在代碼不運(yùn)行的狀態(tài)下，分析出不需要的代碼；
• 利用es6模塊的規(guī)范
  • ES6 Module引入進(jìn)行靜態(tài)分析，故而編譯的時(shí)候正確判斷到底加載了那些模塊
  • 靜態(tài)分析程序流，判斷那些模塊和變量未被使用或者引用，進(jìn)而刪除對(duì)應(yīng)代碼

6.一些常見Loader

• file-loader：把?件輸出到?個(gè)?件夾中，在代碼中通過(guò)相對(duì) URL 去引?輸出的?件

• url-loader：和 file-loader 類似，但是能在?件很?的情況下以 base64 的?式把?件內(nèi)容注?到代碼中去

• source-map-loader：加載額外的 Source Map ?件，以?便斷點(diǎn)調(diào)試

• image-loader：加載并且壓縮圖??件

• babel-loader：把 ES6 轉(zhuǎn)換成 ES5

• css-loader：加載 CSS，?持模塊化、壓縮、?件導(dǎo)?等特性

• style-loader：把 CSS 代碼注?到 JavaScript 中，通過(guò) DOM 操作去加載 CSS。

• eslint-loader：通過(guò) ESLint 檢查 JavaScript 代碼

到了這里，關(guān)于前端面試練習(xí)24.3.5的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！