面試官：說說webpack中常見的Plugin？解決了什么問題？

#面試官：說說webpack中常見的Plugin？解決了什么問題？ | 來源: 網(wǎng)絡(luò)整理| 查看: 265

# 面試官：說說webpack中常見的Plugin？解決了什么問題？

# 一、是什么

Plugin（Plug-in）是一種計(jì)算機(jī)應(yīng)用程序，它和主應(yīng)用程序互相交互，以提供特定的功能

是一種遵循一定規(guī)范的應(yīng)用程序接口編寫出來的程序，只能運(yùn)行在程序規(guī)定的系統(tǒng)下，因?yàn)槠湫枰{(diào)用原純凈系統(tǒng)提供的函數(shù)庫或者數(shù)據(jù)

webpack中的plugin也是如此，plugin賦予其各種靈活的功能，例如打包優(yōu)化、資源管理、環(huán)境變量注入等，它們會(huì)運(yùn)行在 webpack 的不同階段（鉤子 / 生命周期），貫穿了webpack整個(gè)編譯周期

目的在于解決loader 無法實(shí)現(xiàn)的其他事

# 配置方式

這里講述文件的配置方式，一般情況，通過配置文件導(dǎo)出對象中plugins屬性傳入new實(shí)例對象。如下所示：

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通過 npm 安裝 const webpack = require('webpack'); // 訪問內(nèi)置的插件 module.exports = { ... plugins: [ new webpack.ProgressPlugin(), new HtmlWebpackPlugin({ template: './src/index.html' }), ], }; 123456789# 二、特性

其本質(zhì)是一個(gè)具有apply方法javascript對象

apply 方法會(huì)被 webpack compiler調(diào)用，并且在整個(gè)編譯生命周期都可以訪問 compiler對象

compiler hook 的 tap方法的第一個(gè)參數(shù)，應(yīng)是駝峰式命名的插件名稱

關(guān)于整個(gè)編譯生命周期鉤子，有如下：

entry-option ：初始化 option run compile：真正開始的編譯，在創(chuàng)建 compilation 對象之前 compilation ：生成好了 compilation 對象 make 從 entry 開始遞歸分析依賴，準(zhǔn)備對每個(gè)模塊進(jìn)行 build after-compile：編譯 build 過程結(jié)束 emit ：在將內(nèi)存中 assets 內(nèi)容寫到磁盤文件夾之前 after-emit ：在將內(nèi)存中 assets 內(nèi)容寫到磁盤文件夾之后 done：完成所有的編譯過程 failed：編譯失敗的時(shí)候 # 三、常見的Plugin

常見的plugin有如圖所示：

下面介紹幾個(gè)常用的插件用法：

# HtmlWebpackPlugin

在打包結(jié)束后，?動(dòng)生成?個(gè) html ?文件，并把打包生成的js 模塊引?到該 html 中

npm install --save-dev html-webpack-plugin 1// webpack.config.js const HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { ... plugins: [ new HtmlWebpackPlugin({ title: "My App", filename: "app.html", template: "./src/html/index.html" }) ] }; 123456789101112 DOCTYPE html> html-webpack-plugin 12345678910111213

在 html 模板中，可以通過的方式獲取配置的值

更多的配置可以自尋查找

# clean-webpack-plugin

刪除（清理）構(gòu)建目錄

npm install --save-dev clean-webpack-plugin 1const {CleanWebpackPlugin} = require('clean-webpack-plugin'); module.exports = { ... plugins: [ ..., new CleanWebpackPlugin(), ... ] } 123456789# mini-css-extract-plugin

提取 CSS 到一個(gè)單獨(dú)的文件中

npm install --save-dev mini-css-extract-plugin 1const MiniCssExtractPlugin = require('mini-css-extract-plugin'); module.exports = { ..., module: { rules: [ { test: /\.s[ac]ss$/, use: [ { loader: MiniCssExtractPlugin.loader }, 'css-loader', 'sass-loader' ] } ] }, plugins: [ ..., new MiniCssExtractPlugin({ filename: '[name].css' }), ... ] } 12345678910111213141516171819202122232425# DefinePlugin

允許在編譯時(shí)創(chuàng)建配置的全局對象，是一個(gè)webpack內(nèi)置的插件，不需要安裝

const { DefinePlugun } = require('webpack') module.exports = { ... plugins:[ new DefinePlugin({ BASE_URL:'"./"' }) ] } 12345678910

這時(shí)候編譯template模塊的時(shí)候，就能通過下述形式獲取全局對象

← 說說webpack中常見的Loader？解決了什么問題？說說Loader和Plugin的區(qū)別？編寫Loader，Plugin的思路？ →

【本文地址】

公司簡介

聯(lián)系我們

今日新聞

推薦新聞

專題文章