本文将带你一起开发你的第一个 Webpack 插件，从 Webpack 配置工程师，迈向 Webpack 开发工程师！做自己的轮子，让别人用去吧。一、背景介绍本文灵感源自业务中的经验总结，不怕神一样的产品，只怕一根筋的开发。在项目打包遇到问题：“当项目托管到 CDN 平台，希望实现项目中的 index.js 不被缓存”。因为我们需要修改 index.js 
原创
2022-03-30 14:13:13
1137阅读
本文将带你一起开发你的第一个 Webpack 插件，从 Webpack 配置工程师，迈向 Webpack 开发工程师！做自己的轮子，让别人用去吧。一、背景介绍本文灵感源自业务中的经验总结，不怕神一样的产品，只怕一根筋的开发。在项目打包遇到问题：“当项目托管到 CDN 平台，希望实现项目中的 index.js 不被缓存”。因为我们需要修改 index.js 中的内容，不想用户被缓存。思考一阵，有这么
原创
2021-04-16 20:40:54
794阅读
本文使用的Webpack-Quickly-Starter快速搭建 Webpack4 本地学习环境。建议多阅读 Webpack 文档《Writing a Plugin》章节，学习开发简单插件。”本文将带你一起开发第一个 Webpack 插件，从 Webpack 配置工程师，迈向 Webpack 开发工程师！做自己的轮子，让别人用去吧。完整代码：https://github.com/pingan878
原创
2022-11-29 11:37:42
133阅读
webpack 插件 webpack-dev-server 1、作用 每当修改源代码，自动进行项目的打包和创建 2、安装与配置 安装：输入命令：npm install webpack-dev-server@3.11.2 -D 配置： 修改 package.json --> scripts 中的 de ...
转载
2021-08-12 15:47:00
79阅读
2评论
安装webpack插件的作用 通过安装和配置第三方插件，可以拓展webpack的能力，从而让webpack用起来方便。最常用的webpack插件有如下两个： webpack-dev-server 类似于node.js阶段用到的nodemon工具 每当修改了源代码，webpack会自动进行项目的打包和 ...
转载
2021-10-03 15:39:00
109阅读
2评论
插件可以完成更多 loader 不能完成的功能。 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。 Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。 接下来，我们利用一个最简单的 BannerPlugin 内置插件来实践插件的配置和运行，这个
转载
2017-04-24 19:22:00
134阅读
2评论
style-loader：加载样式表css-loader：加载样式表less-loader：加载less模式表file-loader：加载文件csv-loader：加载csv文件xml-loader：加载xml文件html-webpack-plugin：更改标题clean-webpack-plugin：清除无用文件webpack-dev-server：热加载uglifyjs-webpack-plu
原创
2018-04-05 14:58:35
5453阅读
plugin cnpm install uglifyjs-webpack-plugin --save-dev webpack.config.js const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); plugins: [ new Ugl
转载
2021-07-07 17:48:00
446阅读
CopyWebpackPlugin 是一个在 Webpack 构建过程中非常实用的插件，它的主要功能是将文件或文件夹从一个地方复制到另一个地方。这个插件在开发环境和生产环境中都很有用，比如，你可以用它来复制静态资源、配置文件或者其他任何需要在构建过程中被复制的文件。安装要使用 CopyWebpackPlugin，你首先需要安装它。你可以通过 npm 或 yarn 来安装这个插件
plugin1. clean-webpack-plugin介绍主要用来清除文件，默认webpack打包后dist文件下的js文件是不会自动清除的，修改之后再次打包旧的文件会仍然存在安装npm install --save-dev clean-webpack-plugin引用//webpack.config.js中添加CleanWebpackPlugin插件const CleanWebpackPlu
原创
精选
2023-02-11 20:59:46
287阅读
插件地址：https://www.npmjs.com/package/html-webpack-plugin 这个插件用来简化创建服务于 webpack bundle 的 HTML 文件，尤其是对于在文件名中包含了 hash 值，而这个值在每次编译的时候都发生变化的情况。你既可以让这个插件来帮助你自
转载
2016-08-14 19:29:00
277阅读
2评论
答疑Q：kbone 主要有哪些依赖包？如何安装升级 kbone 依赖？A：kbone 依赖主要包含三个：mp-webpack-plugin、miniprogram-element 和 miniprogram-render。其中 mp-webpack-plugin 是一个 webpack 插件，需要安装在项目目录中。miniprogram-element 和 miniprogram-render 则
转载
2021-03-12 15:11:07
697阅读
这个插件用来简化创建服务于 webpack bundle 的 HTML 文件，尤其是对于在文件名中包含了 hash 值，而这个值在每次编译的时候都发生变化的情况。你既可以让这个插件来帮助你自动生成 HTML 文件，也可以使用 lodash 模板加载生成的 bundles，或者自己加载这些 bundles。
原创
2022-05-03 11:02:08
307阅读
Webpack插件为第三方开发者释放了Webpack的最大可能性。利用多级回调开发者可
原创
2022-10-04 22:09:17
155阅读
文章目录1. webpack 插件的作用2. webpack-dev-server2.1 安装 webpack-dev-server2.2 配置 webpack-dev-server2.3 打包生成的文件哪儿
原创
2022-05-05 09:41:09
10000+阅读
01案例背景在项目中，我们经常需要存档前端每次打包的版本，方便线上快速切换不同版本使用。经过思考，我们可以在打包时，将本次打包结果另存为zip压缩包，方便后续使用。于是我准备开发一个Webpack插件实现此功能，借助iFlyCode智能编程助手，2分钟就能完成！02开发过程整理好功能需求描述，发送给iFlyCode：// my-webpack-backup-plugin.jsconst fs =
现在插件的书写格式：// 简单插件class MyPlugin { constructor (options) { console.log(
原创
2022-11-23 00:22:33
240阅读
原创
2021-09-08 10:22:33
298阅读
默认值 开箱即用的 SplitChunksPlugin 应该对大多数用户都很好用。 默认情况下，它只影响随需应变的块，因为更改初始块会影响运行项目时包含的应有脚本标记 HTML 文件。 webpack 将根据以下条件自动分割块: 新块可被共享的，或者来自 node_modules 文件夹 新块将大于
转载
2020-11-07 13:56:00
156阅读
2评论
围绕 Webpack 打包流程中最核心的机制就是所谓的 Plugin 机制。所谓插件即是 webpack 生态中最关键的部分， 它为社区用户提供了一种强有力的方式来直接触及 webpack 的编译过程(compilation process)。今天，我们来聊聊 Webpack 中必不可少的核心 Plugin 机制 ～Plugin本质上在 Webpack 编译阶段会为各个编译对象初始化不同的 Hoo
