webpack?Plugin的作用是什么

這篇“webpack Plugin的作用是什么”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“webpack Plugin的作用是什么”文章吧。

一、pulgin 的作用

• pulgin 就是“插件”的意思，主要目的就是解決 loader 無法實(shí)現(xiàn)的事情，loader 只是用作于將特定的模塊進(jìn)行轉(zhuǎn)換，而 pulgin 可以用于執(zhí)行更加廣泛的任務(wù)，比如打包優(yōu)化、資源管理、環(huán)境變量注入等

• pulgin 是貫穿 webpack 整個(gè)編譯周期的，運(yùn)行在 webpack 的不同階段（鉤子 / 生命周期）

二、pulgin 配置方式

通常情況下，pulgin 的配置都是通過 webpack.config.js 配置文件導(dǎo)出對(duì)象中 plugins 屬性傳入 new 實(shí)例對(duì)象

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

三、pulgin 的本質(zhì)

pulgin 本質(zhì)上是一個(gè)具有 apply 方法 javascript 對(duì)象，而他的這個(gè) apply 方法會(huì)被 webpack compiler 階段調(diào)用，并且在整個(gè)編譯生命周期都可以訪問 compiler 對(duì)象

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';

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

module.exports = ConsoleLogOnBuildWebpackPlugin;

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

• entry-option ：初始化 option

• run

• compile： 真正開始的編譯，在創(chuàng)建 compilation 對(duì)象之前

• compilation ：生成好了 compilation 對(duì)象

• make 從 entry 開始遞歸分析依賴，準(zhǔn)備對(duì)每個(gè)模塊進(jìn)行 build

• after-compile： 編譯 build 過程結(jié)束

• emit ：在將內(nèi)存中 assets 內(nèi)容寫到磁盤文件夾之前

• after-emit ：在將內(nèi)存中 assets 內(nèi)容寫到磁盤文件夾之后

• done： 完成所有的編譯過程

• failed： 編譯失敗的時(shí)候

四、常見的 pulgin

4-1 html-webpack-plugin

作用：

• 利用 HtmlWebpackPlugin 插件自動(dòng)生成 html 文件，并且對(duì)打包后的 js 文件做了一個(gè)引入

• HtmlWebpackPlugin 原理是通過自帶默認(rèn)的 ejs 模版去生成的，當(dāng)然也可以自定義模版，在 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

作用：每次打包時(shí)候，CleanWebpackPlugin 插件就會(huì)自動(dòng)把上一次打的包刪除

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

4-3 mini-css-extract-plugin

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

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 允許在編譯時(shí)創(chuàng)建配置的全局常量，是一個(gè) webpack 內(nèi)置的插件（不需要單獨(dú)安裝）

const { DefinePlugun } = require('webpack')

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

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

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

4-5 copy-webpack-plugin

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

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

以上就是關(guān)于“webpack Plugin的作用是什么”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。