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

先看两个示例

vue.js

jQuery.js

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

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

最简单的配置

const webpack = require('webpack')

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

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
 

实用的配置

将变量信息从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,
      }),
    ],
  },
}

  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
 

LICENSE

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

  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

参考
https://webpack.docschina.org/plugins/banner-plugin/
webpack 在打包的文件头部添加 Banner 信息

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/120343164