Home

Index

How to use the BannerPlugin function from webpack

Find comprehensive JavaScript webpack.BannerPlugin code examples handpicked from public code repositorys.

webpack.BannerPlugin is a plugin that adds a banner, such as copyright information or licensing details, to the top of each generated chunk or bundle during the build process.

config.js

77
78
79
80
81
82
83
84
85
86
87
	})
);


// Adds a banner to the top of each generated chunk.
webpackConfig.plugins.push(
    new webpack.BannerPlugin(`
	Boot Helpers

	@source: https://github.com/xizon/boot-helpers
	@version: ${json.version} (${moment().format( "MMMM D, YYYY" )})

webpack.config.js

GitHub: coldenate/remcord

90
91
92
93
94
95
96
97
98
99
}),
new ProvidePlugin({
  React: 'react',
  reactDOM: 'react-dom',
}),
new BannerPlugin({
  banner: (file) => {
    return !file.chunk.name.includes(SANDBOX_SUFFIX) ? 'const IMPORT_META=import.meta;' : '';
  },
  raw: true,

How does webpack.BannerPlugin work?

webpack.BannerPlugin is a plugin for the Webpack module bundler that adds a banner to the top of each generated chunk or bundle during the build process. The banner can contain any information that is relevant or required, such as copyright information, licensing details, author information, or build information.

To use the plugin, you first create an instance of it with the required banner text as a parameter. Then, you add this instance to your Webpack configuration file as a plugin, and it will automatically add the banner to the top of each generated chunk or bundle during the build process. The plugin can also be configured to apply the banner only to specific files or file types, or to exclude certain files or file types from the banner. This allows for greater flexibility in customizing the build output according to the project requirements.

gulpfile.js

GitHub: marload/pdf.js

167
168
169
170
171
172
173
174
175
176
output: output,
performance: {
  hints: false, // Disable messages about larger file sizes.
},
plugins: [
  new webpack2.BannerPlugin({ banner: licenseHeaderLibre, raw: true, }),
],
resolve: {
  alias: {
    'pdfjs': path.join(__dirname, 'src'),

+ 3 other calls in file

webpack.base.js

GitHub: TheSGJ/eruda

96
97
98
99
100
101
102
103
104
105
      use: [rawLoader],
    },
  ],
},
plugins: [
  new webpack.BannerPlugin(banner),
  new webpack.DefinePlugin({
    VERSION: '"' + pkg.version + '"',
  }),
],

Ai Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
  },
  plugins: [
    new webpack.BannerPlugin({
      banner: "Copyright (c) 2023 MyCompany",
      raw: true,
    }),
  ],
};

In this example, we are creating an instance of webpack.BannerPlugin with the banner text as Copyright (c) 2023 MyCompany. We also set the raw option to true, which ensures that the banner is treated as raw text and inserted as is, without being wrapped in a comment or other formatting. Finally, we add the plugin instance to the plugins array in the Webpack configuration file. Now, each time we run the Webpack build process, the banner will be added to the top of the generated bundle.js file.

webpack.config.js

GitHub: webcyspot/Laravel-JP

21
22
23
24
25
26
27
28
29
30
},

externals: externals,

plugins: [
  new webpack.BannerPlugin({
    banner: fs.readFileSync('./dev/banner.txt', 'utf8'),
    raw: true,
    entryOnly: true
  })

webpack.config.es6.js

GitHub: gafea84/angular_form_master

144
145
146
147
148
149
150
151
152
153
154
  return {test: /\.html$/, loaders: ['raw'], exclude: /node_modules/};
}


function getCommonPlugins() {
  return _.filter([
    new webpack.BannerPlugin(getBanner(process.env.NODE_ENV), {raw: true}),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      VERSION: JSON.stringify(packageJson.version)
    }),

gulpfile.js

GitHub: Oskang09/jsoneditor

26
27
28
29
30
31
32
33
34
35
  return String(fs.readFileSync(HEADER))
    .replace('@@date', today)
    .replace('@@version', version)
}

const bannerPlugin = new webpack.BannerPlugin({
  banner: createBanner(),
  entryOnly: true,
  raw: true
})

webpack.config.js

GitHub: HubWong/PdfPreviewApp

11
12
13
14
15
16
17
18
19
20
    filename: '[name].js',
    library: `dialog`,
    libraryTarget: 'umd'
},
plugins: [
    new webpack.BannerPlugin('art-dialog@' + version + ' | https://github.com/aui/artDialog')
],
externals: {
    jquery: 'jQuery'
},

webpack.config.js

GitHub: sil-asia/pangasinanv2

3
4
5
6
7
8
9
10
11
12
13
14
const fs = require("fs");


const args = process.argv;


let plugins = [
	new webpack.BannerPlugin(fs.readFileSync('./dev/banner.txt', 'utf8'),{ raw: true, entryOnly: true })
];
let externals = [];
let filename = "raphael";

webpack.config.js

GitHub: SurekhaSuresh/Atrocity-Case-Management

3
4
5
6
7
8
9
10
11
12
13
14
const fs = require("fs");


const args = process.argv;


let plugins = [
	new webpack.BannerPlugin(fs.readFileSync('./dev/banner.txt', 'utf8'), { raw: true, entryOnly: true })
];
let externals = [];
let filename = "raphael";

webpack.config.js

GitHub: Vansh1190/herty

45
46
47
48
49
50
51
52
53
54
  library: ['CKEditor5', dir],
  libraryTarget: 'umd',
  libraryExport: 'default',
},
plugins: [
  new webpack.BannerPlugin('cspell:disable'),
  new webpack.DllReferencePlugin({
    manifest: require(path.resolve(__dirname, '../../node_modules/ckeditor5/build/ckeditor5-dll.manifest.json')), // eslint-disable-line global-require, import/no-unresolved
    scope: 'ckeditor5/src',
    name: 'CKEditor5.dll',

webpack.config.js

GitHub: Tencent/vConsole

9
10
11
12
13
14
15
16
17
18
const isDev = argv.mode === 'development';
const __TARGET__ = BuildTarget.indexOf(env.target) === -1 ? BuildTarget[0] : env.target;
const noCoreJS = !!env['no-core-js'] || __TARGET__ === 'wx';
// define plugins
const plugins = [
  new Webpack.BannerPlugin({
    banner: [
      'vConsole v' + pkg.version + ' (' + pkg.homepage + ')',
      '',
      'Tencent is pleased to support the open source community by making vConsole available.',

312

+ 3 other calls in file

Other functions in webpack

Sorted by popularity

webpack.ProvidePlugin is the most popular function in webpack (1161 examples)

Other popular packages:

Home

About