webpack 插件[plugins] 简单介绍

最新推荐文章于 2024-07-13 09:15:00 发布
最新推荐文章于 2024-07-13 09:15:00 发布
阅读量476 收藏
点赞数
分类专栏： 打包工具及其配置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AS_TS/article/details/114267381
版权

webpack 插件[plugins]

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

在这里插入图片描述

清理dist文件夹
  1. 使用 npm 下载安装 clean-webpack-plugin 插件
    npm install clean-webpack-plugin --save-dev
  2. 在webpack.config.js 中配置插件
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const path = require('path');

module.exports = {
    entry: './path/to/my/entry/file.js',
    output: {
        /**
         * With zero configuration,
         *   clean-webpack-plugin will remove files inside the directory below
         * 	 clean-webpack-plugin将删除下面目录中的文件
         */
        path: path.resolve(process.cwd(), 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
    ],
};

clean-webpack-plugin 插件包：https://www.npmjs.com/package/clean-webpack-plugin

打包 .html 文件
  1. 安装下载 html-webpack-plugin 插件
    npm install --save-dev html-webpack-plugin
  2. 在webpack.config.js 中配置插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const path = require('path');

module.exports = {
    entry: './path/to/my/entry/file.js',
    output: {
        /**
         * With zero configuration,
         *   clean-webpack-plugin will remove files inside the directory below
         * 	 clean-webpack-plugin将删除下面目录中的文件
         */
        path: path.resolve(process.cwd(), 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'My App', // 标题
            filename: 'index.html', // 输出文件名
        }),
    ],
};

这是一个webpack插件，它简化了HTML文件的创建，以服务于你的webpack包。这对于在文件名中包含散列的webpack包特别有用，因为文件名会改变每次编译。您可以让插件为您生成一个HTML文件，或者使用lodash模板提供您自己的模板，或者使用您自己的加载器。

如果你想要了解 HtmlWebpackPlugin 插件提供的全部的功能和选项，你就应该阅读 HtmlWebpackPlugin 仓库中的源码：https://github.com/jantimon/html-webpack-plugin。

*使用自定义html模板

如果默认生成的HTML不能满足您的需要，您可以提供自己的模板。最简单的方法是使用模板选项并传递一个定制的HTML文件。html-webpack-plugin会自动将所有必需的CSS, JS, manifest和favicon文件注入到标记中。
这里记录了其他模板加载器的详细信息。
使用template属性设置模板路径：template 属性介绍

webpack.config.js

plugins: [
  new HtmlWebpackPlugin({
    title: 'Custom template',
    // Load a custom template (lodash by default)
    template: 'index.html'
  })
]

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
  </body>
</html>
*生成多个HTML文件

要生成多个HTML文件，请在插件数组中多次声明插件

{
  entry: 'index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(), // 生成默认的 index.html
    new HtmlWebpackPlugin({  // 依据路径下的test.html文件再生成一个 test.html
      filename: 'test.html',
      template: 'src/assets/test.html'
    })
  ]
}
打包静态资源

在这里插入图片描述

  1. 安装下载 copy-webpack-plugin 插件
    npm install --save-dev copy-webpack-plugin
  2. 在webpack.config.js 中配置插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

module.exports = {
    entry: './path/to/my/entry/file.js',
    output: {
        /**
         * With zero configuration,
         *   clean-webpack-plugin will remove files inside the directory below
         * 	 clean-webpack-plugin将删除下面目录中的文件
         */
        path: path.resolve(process.cwd(), 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'My App', // 标题
            filename: 'index.html', // 输出文件名
        }),
        new CopyWebpackPlugin({
        	patterns: [
				{ from: "source", to: "dest" }, // 'from' 我们сopy文件所在的Glob或路径 
        		{ from: "other", to: "public" }, // 'to' 打包输出路径
			],
		}),
    ],
};

copy-webpack-plugin 插件详细介绍：https://www.npmjs.com/package/copy-webpack-plugin#globoptions

*编写自定义插件

使用 webpack API 中的 compiler 钩子，可以在特定的时期进行操作
详细案例参考链接：webpack 编写自定义插件

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const RemoveCommentsPlugin = require('./remove-comments-plugin') // 自定义插件

module.exports = {
    entry: './path/to/my/entry/file.js',
    output: {
        /**
         * With zero configuration,
         *   clean-webpack-plugin will remove files inside the directory below
         * 	 clean-webpack-plugin将删除下面目录中的文件
         */
        path: path.resolve(process.cwd(), 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: 'My App', // 标题
            filename: 'index.html', // 输出文件名
        }),
        new CopyWebpackPlugin({
        	patterns: [
				{ from: "source", to: "dest" }, // 'from' 我们сopy文件所在的Glob或路径 
        		{ from: "other", to: "public" }, // 'to' 打包输出路径
			],
		}),
		new RemoveCommentsPlugin() // 自定义插件
    ],
};
AS_TS
关注
专栏目录
webpack的基本使用（内含plugins插件）
m0_69674158的博客
08-15 578
webpack的概念和基本使用，含pluins插件
手写一个webpack插件
gogo2027的博客
11-04 267
前端性能优化是一个老生常谈的话题，关于性能优化的技术文档和书籍都特别多。如果大家想深入学习前端性能优化相关内容，有以下推荐雅虎军规35条某东上搜“前端性能优化”，书籍也特别多。但是前端性能优化做的所有工作，都和一个灵魂拷问有极大的关系：在浏览器输入url后，发生了什么？首先url是一个域名，首先它要被解析成ip地址。如果你的设备之前访问过该url，那么本地可能会缓存ip地址。如果没有缓存过，那么就向dns服务器进行解析。根据 IP 地址和默认端口建立TCP连接，三次握手。
webpack--plugins
houdabiao的博客
04-12 350
插件(plugins)听说对整个项目的起作用的和loader对页面起作用，还是有小小的区别那就先从版权声明插件---这个是内置插件不需要下载，找一会怎样下载麻烦了意义不是很大，我就不准备研究这单一的插件，这个内置插件主要用来---用的声明一下webpack --const webpack=require('webpack');就可以了还偷就是在plugins:[]new一个new webpack....
webpack之Plugins
仇益阳的博客
06-06 533
webpack之Plugins
webpack——plugin的结构及其应用
最新发布
jydchudq的博客
07-13 1246
📚上篇文章分析了loader的运行过程。loader的功能定位是进行预处理转换代码，而另外一些操作需要依靠plugin来完成。先看plugins在官网中的定义老规矩，提炼一下意思，大致就是说。具体是什么事呢？举个例子： 当webpack生成文件时，顺便多生成一个说明描述文件。这种操作其实就是通过plugin，把某些功能嵌入到webpack的编译流程中。
WebPack系列教程（七）：使用Plugins
zzzkk2009的专栏
03-09 8084
使用插件添加通常涉及到的WebPack捆绑功能。例如，BellOnBundlerErrorPlugin会通知您在打包构建过程中的错误。内置插件通过在webpack配置中使用插件属性来将插件包含进你的项目中。// webpack should be in the node_modules directory, install if not. var webpack = require("webpack
webpack ------ plugins
博客转至https://chengyanzhao.github.io，CSDN不再更新。
01-16 807
这里记录一些我学过的plugins，并将作用与配置记录在这里。遇到不对的地方、不充分的地方，随时学习随时更新。——2017年1月16日 11:00:271.html-webpack-plugin1.1简介html-webpack-plugin可以为你在outpath中自动生成一个index.html文件，并插入script元素引用你打包的结果。 1.2用法npm install html-webpa
Webpack之Plugins
Meskjei的博客
08-27 556
文章目录概念HTMLWebpackPlugin使用clean-webpack-plugin使用 概念 plugin可以在Webpack运行到某个时刻的时候，来自动做一些事情，类似于React里的生命周期函数。 HTMLWebpackPlugin 这个插件的主要功能是在打包结束之后，自动在输出目录下生成一个html文件，并把打包生成的JS文件自动的引入到这个html文件中。 使用 const pat...
webpack-inject-plugin:一个webpack插件，用于将代码动态注入到包中
05-02
一个webpack插件，用于将代码动态注入到包中。 您可以查看示例 用法 # webpack . config . js const InjectPlugin = require ( 'webpack-inject-plugin' ) . default ; module . exports = { // Other stuff in ...
webpack-load-plugins:自动加载webpack插件
04-27
webpack-load-plugins 安装 $ npm install --save-dev webpack-load-plugins 用法 给定一个package.json文件，该文件中包含一些依赖项： { " devDependencies " : { " clean-webpack-plugin " : " * " , " ...
未使用文件webpack插件：在webpack的上下文中查看所有未由webpack编译的文件
02-06
未使用的文件webpack插件 在webpack的上下文中显示所有非由webpack编译的文件 使用npm安装： npm i --save-dev unused-files-webpack-plugin 用纱安装： yarn add --dev unused-files-webpack-plugin 用法 ...
chrome-webstore：Google Chrome Web Store HTTP客户端
01-31
chrome-webstore Google Chrome网上应用店HTTP客户端 目录 /// API 名称 争论 退货 描述 详情 {id, related, more, locale, version, ...options} {Object} 有关网上商店项目的完整详细信息 项目 {search, category, rating, features, count, offset, locale, version, ...options} [Array] 列出网上商店项目（详细数据的子集） 评论 {id, count, offset, locale, sort, version, ...options} [Array] 列出商品评论 问题 {id, type, count, page, version, ...options} [Array] 列出项目的问题 版 {...options} string Chrome Web Store var webstore = require ( 'chrome-webstore' ) ; ( async (
html-webpack-plugin修改页面的title的方法
11-20
vue-cli2.X：修改config目录下index.js const title = '标题1' // const title = '标题2' // const title = '标题3' module.exports = { title: title, dev: { ... }, build: { ... }, test: { ... } 接着就可以在webpack.dev.conf.js, webpack.prod.conf.js中的HtmlWebpackPlugin使用config.title new HtmlWebpackPlugin({ title: c
Webpack之plugin
A____t的博客
04-25 2923
webpack中的插件
Webpack中Plugins的用法（学习篇8）
Riona_cheng的博客
09-02 568
webpack中的plugins插件
webpack基础(三)——plugins
weixin_47450807的博客
01-29 1033
上一节的loader是用来实现加载不同文件类型之间数据的转化。而plugins则可以执行更为广泛的任务，比如打包，资源管理，环境变量注入等。接下来我们将根据不同的打包需求来了解插件。 一、CleanWebpackPlugin 我们在每一次打包时，都必须手动删除打包文件夹dist文件夹，这样开发十分不友好，此时我们可以使用插件，帮我们自动删除之前已经打包的文件夹。 const { CleanWebpackPlugin } = require("clean-webpack-plugin") modules.ex
webpack常用plugins
ch071714301的专栏
10-23 784
最近项目中webpack用到以下几个常用的plugins，记录一下 CopyWebpackPlugin 用途：将单个文件或整个目录复制到构建目录。 examples：将static文件夹下面所有的文件复制到构建目录 new CopyWebpackPlugin([ { from: path.resolve(__dirname, '../static'), ...
如何编写一个WebPack的插件原理及实践
hsany330的专栏
09-11 558
阅读目录 一：webpack插件的基本原理 二：理解 Compiler对象 和 Compilation 对象 三：插件中常用的API 四：编写插件实战 回到顶部 一：webpack插件的基本原理 webpack构建工具大家应该不陌生了，那么下面我们来简单的了解下什么是webpack的插件。比如我现在写了一个插件叫 "kongzhi-plugin" 这个插件。那么这个插件在处理webpa...
初探webpack之编写plugin
WindrunnerMax
10-06 329
初探webpack之编写plugin webpack通过plugin机制让其使用更加灵活，以适应各种应用场景，当然也大大增加了webpack的复杂性，在webpack运行的生命周期中会广播出许多事件，plugin可以hook这些事件，在合适的时机通过webpack提供的API改变其在处理过程中的输出结果。 描述 webpack是一个现代JavaScript应用程序的静态模块打包器module bundler，当webpack处理应用程序时，它会递归地构建一个依赖关系图dependency graph，其中包
Webpack 常用plugins
04-26
Webpack 常用的 plugins 包括： 1. HtmlWebpackPlugin: 生成 HTML 文件，并将 bundle 的 JS 文件自动引入到 HTML 中。 2. UglifyJsPlugin: 压缩 JS 代码，减小文件体积。 3. ExtractTextPlugin: 将 CSS 代码打包...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值