超级详细的webpack Plugin讲解

 更新时间:2022年04月11日 10:15:29   作者:曼联的小黑熊  
plugin是插件的意思,通常是用于对某个现有的架构进行扩展,下面这篇文章主要给大家介绍了关于webpack Plugin的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

一、pulgin 的作用

  • pulgin 就是“插件”的意思,主要目的就是解决 loader 无法实现的事情,loader 只是用作于将特定的模块进行转换,而 pulgin 可以用于执行更加广泛的任务,比如打包优化、资源管理、环境变量注入等

  • 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: 真正开始的编译,在创建 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 允许在编译时创建配置的全局常量,是一个 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 是一个复制文件的插件,复制文件或者目录到指定区域,比如 vue 的打包过程中,如果我们将一些文件放到 public 的目录下,那么这个目录会被复制到 dist 文件夹中

new CopyWebpackPlugin({
            // 通过 CopyWebpackPlugin 插件将 public 中的文件复制到打包后的文件夹下
            // patterns 是匹配的意思
            patterns: [
                {
                    from: "public", // 设置从哪一个源中开始复制
                    to: "build" // 可以省略,默认是复制到打包输出的路径,会根据 output 
                    globOptions: {
                        ignore: ['**/DS_Store', '**/index.html', '**/abc.txt'] // ** 表示的是 from 的文件夹
                    }
                    // globOptions:设置一些额外的选项,其中可以编写需要忽略的文件,
                    //比如.DS_Store:mac目录下回自动生成的一个文件;.index.html:也不需要复制,因为我们已经通过HtmlWebpackPlugin完成了index.html的生成
                }
            ]
        })

总结

到此这篇关于webpack Plugin讲解的文章就介绍到这了,更多相关webpack Plugin讲解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 深入了解JavaScript中的函数式编程

    深入了解JavaScript中的函数式编程

    JavaScript是一门多范式的编程语言,其中函数式编程成为了一种受欢迎的范式之一,本文将带您深入了解JavaScript函数式编程的核心概念和技术,需要的可以参考一下
    2023-06-06
  • 微信小程序实现tabbar凹凸圆选中动画效果实例

    微信小程序实现tabbar凹凸圆选中动画效果实例

    小程序日益增多的情况下,UI风格显得越来越重要,下面这篇文章主要给大家介绍了关于微信小程序实现tabbar凹凸圆选中动画效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • Express框架中_router 对象数据结构使用详解

    Express框架中_router 对象数据结构使用详解

    这篇文章主要为大家介绍了Express框架中_router的对象数据结构使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • JS结合WebSocket实现实时双向通信

    JS结合WebSocket实现实时双向通信

    WebSocket 是一种在 Web 应用程序中实现实时、双向通信的协议,在本文中,我们将深入介绍 WebSocket 的原理、用法以及一些实际应用场景,x需要的可以参考下
    2023-11-11
  • 关于ES6新特性最常用的知识点汇总

    关于ES6新特性最常用的知识点汇总

    日常开发中写的 JavaScript 代码,会用到ES6的部分新特性,所以下面这篇文章主要给大家介绍了关于ES6新特性最常用的知识点,文章总结的非常全面,需要的朋友可以参考下
    2021-11-11
  • JavaScript 中如何实现大文件并行下载

    JavaScript 中如何实现大文件并行下载

    本文将介绍如何利用 async-pool 这个库提供的 asyncPool 函数来实现大文件的并行下载。
    2021-05-05
  • js中substring使用示例详解

    js中substring使用示例详解

    substring是从中截取一段字符串,在组成一个新的字符串,这篇文章主要介绍了js中substring使用示例小结,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • 让你更好使用Typescript的11个技巧分享

    让你更好使用Typescript的11个技巧分享

    学习Typescript通常是一个重新发现的过程。本文将总结几个技巧,帮助你充分发挥语言的潜力,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-01-01
  • 简单实现js页面切换功能

    简单实现js页面切换功能

    这篇文章主要为大家详细介绍了如何实现js页面切换功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • js函数名与form表单元素同名冲突的问题

    js函数名与form表单元素同名冲突的问题

    本篇文章主要是对js函数名与form表单元素同名冲突的问题进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03

最新评论