超級詳細的webpack?Plugin講解

更新時間：2022年04月11日 10:15:29 作者：曼聯(lián)的小黑熊

plugin是插件的意思,通常是用于對某個現(xiàn)有的架構進行擴展,下面這篇文章主要給大家介紹了關于webpack?Plugin的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下

一、pulgin 的作用

pulgin 就是“插件”的意思，主要目的就是解決 loader 無法實現(xiàn)的事情，loader 只是用作于將特定的模塊進行轉換，而 pulgin 可以用于執(zhí)行更加廣泛的任務，比如打包優(yōu)化、資源管理、環(huán)境變量注入等
pulgin 是貫穿 webpack 整個編譯周期的，運行在 webpack 的不同階段（鉤子 / 生命周期）

二、pulgin 配置方式

通常情況下，pulgin 的配置都是通過 webpack.config.js 配置文件導出對象中 plugins 屬性傳入 new 實例對象

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

三、pulgin 的本質

pulgin 本質上是一個具有 apply 方法 javascript 對象，而他的這個 apply 方法會被 webpack compiler 階段調用，并且在整個編譯生命周期都可以訪問 compiler 對象

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
    compiler.hooks.run.tap(pluginName, (compilation) => {
      console.log('webpack 構建過程開始！');
    });
  }
}

module.exports = ConsoleLogOnBuildWebpackPlugin;

關于整個編譯生命周期鉤子：

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

四、常見的 pulgin

4-1 html-webpack-plugin

作用：

利用 HtmlWebpackPlugin 插件自動生成 html 文件，并且對打包后的 js 文件做了一個引入
HtmlWebpackPlugin 原理是通過自帶默認的 ejs 模版去生成的，當然也可以自定義模版，在 html 模板中，可以通過 <%=htmlWebpackPlugin.options.XXX%> 的方式獲取配置的值

// webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
 ...
  plugins: [
     new HtmlWebpackPlugin({
            title: "webpack案例",
            template: "./public/index.html", // 指定生成的 html 模版
        }),
  ]
};

4-2 clean-webpack-plugin

作用：每次打包時候，CleanWebpackPlugin 插件就會自動把上一次打的包刪除

const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
 ...
  plugins: [
    new CleanWebpackPlugin()
  ]
}

4-3 mini-css-extract-plugin

作用：提取 CSS 到一個單獨的文件中

const 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'
    }),
    ...
  ]
}

4-4 DefinePlugin

作用：DefinePlugin 允許在編譯時創(chuàng)建配置的全局常量，是一個 webpack 內置的插件（不需要單獨安裝）

const { DefinePlugun } = require('webpack')

module.exports = {
 ...
    plugins:[
        new DefinePlugin({
            BASE_URL: '"./"' // 等價于 const BASE_URL = "./" 他的賦值方式有點奇葩
        }),
    ]
}

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

  <!-- BASE_URL 是一個全局的常量，是通過 DefinePlugin 這個插件去定義的 -->
  <link rel="icon" href="<%= BASE_URL %>favicon.ico" rel="external nofollow" >

4-5 copy-webpack-plugin

作用：CopyWebpackPlugin 是一個復制文件的插件，復制文件或者目錄到指定區(qū)域，比如 vue 的打包過程中，如果我們將一些文件放到 public 的目錄下，那么這個目錄會被復制到 dist 文件夾中

new CopyWebpackPlugin({
            // 通過 CopyWebpackPlugin 插件將 public 中的文件復制到打包后的文件夾下
            // patterns 是匹配的意思
            patterns: [
                {
                    from: "public", // 設置從哪一個源中開始復制
                    to: "build" // 可以省略，默認是復制到打包輸出的路徑，會根據(jù) output 
                    globOptions: {
                        ignore: ['**/DS_Store', '**/index.html', '**/abc.txt'] // ** 表示的是 from 的文件夾
                    }
                    // globOptions：設置一些額外的選項，其中可以編寫需要忽略的文件,
                    //比如.DS_Store：mac目錄下回自動生成的一個文件；.index.html：也不需要復制，因為我們已經(jīng)通過HtmlWebpackPlugin完成了index.html的生成
                }
            ]
        })

總結

到此這篇關于webpack Plugin講解的文章就介紹到這了,更多相關webpack Plugin講解內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

js二維數(shù)組定義和初始化的三種方法總結
本篇文章主要是對js二維數(shù)組定義和初始化的三種方法進行了總結介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-03-03
詳解webpack4.x之搭建前端開發(fā)環(huán)境
這篇文章主要介紹了詳解webpack4.x之搭建前端開發(fā)環(huán)境，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-03-03
JavaScript實現(xiàn)窗口抖動效果
抖動效果在各大網(wǎng)頁上都常遇到，這篇文章主要介紹了JavaScript實現(xiàn)窗口抖動效果的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
2016-10-10
用javascript對一個json數(shù)組深度賦值示例
本節(jié)主要介紹了用javascript對一個json數(shù)組深度賦值的具體實現(xiàn)，需要的朋友可以參考下
2014-07-07
js判斷對象是否是某一類型
下面的代碼就是判斷腳本之家是不是字符串類型的代碼
2008-11-11
js數(shù)組去重的方法總結
今天小編就為大家分享一篇關于js數(shù)組去重的方法總結，小編覺得內容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2019-01-01
基于AGS JS開發(fā)自定義貼圖圖層
這篇文章主要為大家詳細介紹了基于AGS JS開發(fā)自定義貼圖圖層的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-03-03
JS圖片左右無縫隙滾動的實現(xiàn)(兼容IE,Firefox 遵循W3C標準)
下面小編就為大家?guī)硪黄狫S圖片左右無縫隙滾動的實現(xiàn)(兼容IE,Firefox 遵循W3C標準)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-09-09
仿百度輸入框智能提示的js代碼
這篇文章介紹了仿百度輸入框智能提示的js代碼，有需要的朋友可以參考一下
2013-08-08
javascript生成大小寫字母
本文給大家分享的是javascript生成大寫小寫字母的代碼，十分的簡單實用，主要用到了str.charCodeAt()和 String.fromCharCode()方法，有需要的小伙伴可以參考下。
2015-07-07