js:webpack插件BannerPlugin添加版权信息

简介: js:webpack插件BannerPlugin添加版权信息

先看两个示例

vue.js444.png

jQuery.js

55.png打包的时候要加入一些版权信息,如果每次打完包都手动添加,岂不是很累。

可以使用webpack插件BannerPlugin添加版权信息

最简单的配置

const webpack = require('webpack')
module.exports = {
  ...
  plugins: [
    new webpack.BannerPlugin('版权信息')
  ]
}

实用的配置

将变量信息从package.json文件引入,使用nunjucks的模板渲染能力,将模板和数据组合成最终输出的内容

// 引入版权插入必要
const webpack = require('webpack');
const { name, version, author, homepage, description } = require('./package');
const nunjucks = require('nunjucks');
const moment = require('moment');
// 使用模板渲染
const LICENSE = nunjucks.render('LICENSE', {
  name: name,
  version: version,
  description: description,
  author: author,
  homepage: homepage,
  date: moment().format('YYYY-MM-DD HH:mm:ss'),
});
module.exports = {
  ...
  optimization: {
    minimizer: [
      //压缩CSS代码
      new CssMinimizerPlugin(),
      //压缩js代码
      new TerserPlugin({
        extractComments: false, // 不将注释提取到单独的文件中
      }),
      // 添加版权信息
      new webpack.BannerPlugin({
        entryOnly: true,
        banner: LICENSE,
        raw: true,
      }),
    ],
  },
}

LICENSE

/*!
 * Name {{name}}  
 * Version {{version}}  
 * Author: {{author}}
 * Description: {{description}}
 * Homepage:{{homepage}}
 * Date: {{date}}
 */

参考

https://webpack.docschina.org/plugins/banner-plugin/

webpack 在打包的文件头部添加 Banner 信息

相关文章
|
16天前
|
JavaScript
浏览器插件crx文件--JS混淆与解密
浏览器插件crx文件--JS混淆与解密
19 0
|
2月前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。借助插件机制扩展功能,并支持热更新,加速开发流程。
24 4
|
3月前
|
JavaScript 前端开发 安全
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
使用 Node.js 插件给指定目录下的所有图片添加上文字水印
63 0
|
2天前
|
JavaScript
js的插件
js的插件
10 1
|
9天前
|
前端开发
【专栏】实用webpack 插件之 DefinePlugin
【4月更文挑战第29天】`webpack` 的 `DefinePlugin` 插件用于在编译时动态定义全局变量,实现环境变量差异化、配置参数动态化和条件编译。通过配置键值对,如 `ENV: JSON.stringify(process.env.NODE_ENV)`,可以在代码中根据环境执行相应逻辑。实际应用包括动态加载资源、动态配置接口地址和条件编译优化代码。注意变量定义的合法性和避免覆盖,解决变量未定义或值错误的问题,以提升开发效率和项目质量。
|
14天前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。Webpack的插件机制可扩展功能,支持热更新以加速开发流程。
18 2
|
16天前
|
JSON 前端开发 JavaScript
【2024-04-22 源码】最新PDF批注注释插件库,pdf.js插件库,纯前端离线JavaScript库(PDF高亮、下划线、橡皮擦、文本框、画笔、历史记录)
一款基于 pdf.js 开发的PDF批注插件库,支持纯离线内网部署,功能完善、强大且在不断升级,极易上手,欢迎关注!
33 4
【2024-04-22 源码】最新PDF批注注释插件库,pdf.js插件库,纯前端离线JavaScript库(PDF高亮、下划线、橡皮擦、文本框、画笔、历史记录)
|
2月前
|
JSON JavaScript 前端开发
vue项目使用Print.js插件实现PDF文件打印
vue项目使用Print.js插件实现PDF文件打印
72 0
|
2月前
|
JavaScript 前端开发
webpack成长指北第9章---webpack如何对icon字体进行打包
webpack成长指北第9章---webpack如何对icon字体进行打包
37 1
|
2月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
44 0