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 信息

相关文章
|
1天前
|
JavaScript 前端开发
js拖拽框选插件
js拖拽框选插件
11 0
|
22天前
|
JavaScript 前端开发
图片预览放大js插件
图片预览放大js插件
16 0
|
2月前
|
前端开发 JavaScript
|
2月前
|
前端开发 JavaScript 索引
|
2月前
|
前端开发 JavaScript
|
2月前
|
前端开发 JavaScript 容器
|
2月前
|
前端开发 JavaScript
|
2月前
|
前端开发 JavaScript API
|
2月前
|
存储 前端开发 JavaScript
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
Javascript知识【validation插件重写表单注册校验】
Javascript知识【validation插件重写表单注册校验】
推荐文章
更多