用途说明

BannerPlugin ()

Adds a banner to the top of each generated chunk.

• banner a string, it will be wrapped in a comment

• options.raw if true, banner will not be wrapped in a comment

• options.entryOnly if true, the banner will only be added to the entry chunks.

webpack.config.js配置

1

new webpack.BannerPlugin(banner, options)

案例

1
2

用途说明

()

webpack.config.js配置

1
2

案例

1
2

用途说明

ResolverPlugin.FileAppendPlugin ()

This plugin will append a path to the module directory to find a match, which can be useful if you have a module which has an incorrect “main” entry in its package.json/bower.json etc (e.g. “main”: “Gruntfile.js”). You can use this plugin as a special case to load the correct file for this module.

webpack.config.js配置

1
2
3

new webpack.ResolverPlugin([
  new webpack.ResolverPlugin.FileAppendPlugin(['dist.js'])
])

案例

1
2
3

new webpack.ResolverPlugin([
  new webpack.ResolverPlugin.FileAppendPlugin(['/dist/compiled-moduled.js'])
])

用途说明

ResolverPlugin ()

Apply a plugin (or array of plugins) to one or more resolvers (as specified in types).

• plugins a plugin or an array of plugins that should be applied to the resolver(s).

• types a resolver type or an array of resolver types (default: [“normal”], resolver types: normal, context, loader)

All plugins from enhanced-resolve are exported as properties for the ResolverPlugin.

webpack.config.js配置

1

new webpack.ResolverPlugin(plugins, [types])

案例

1
2
3

new webpack.ResolverPlugin([
    new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
], ["normal", "loader"])

用途说明

PrefetchPlugin ()

A request for a normal module, which is resolved and built even before a require to it occurs. This can boost performance. Try to profile the build first to determine clever prefetching points.

• context a absolute path to a directory

• request a request string for a normal module

webpack.config.js配置

1

new webpack.PrefetchPlugin([context], request)

案例

1
2

用途说明

IgnorePlugin ()

Don’t generate modules for requests matching the provided RegExp.

• requestRegExp A RegExp to test the request against.
• contextRegExp (optional) A RegExp to test the context (directory) against.

webpack.config.js配置

1

new webpack.IgnorePlugin(requestRegExp, [contextRegExp])

案例

1
2

用途说明

ContextReplacementPlugin (上下文替换插件)

If the resource (directory) matches resourceRegExp, the plugin replaces the default resource, recursive flag or regExp generated by parsing with newContentResource, newContentRecursive or newContextRegExp respectively. If newContentResource is relative, it is resolve relative to the previous resource. If newContentResource is a function, it is expected to overwrite the ‘request’ attribute of the supplied object.

webpack.config.js配置

1
2
3
4
5

new webpack.ContextReplacementPlugin(
                resourceRegExp, 
                [newContentResource],
                [newContentRecursive],
                [newContentRegExp])

案例

1
2

用途说明

NormalModuleReplacementPlugin (正常模块替换插件)

Replace resources that matches resourceRegExp with newResource. If newResource is relative, it is resolve relative to the previous resource. If newResource is a function, it is expected to overwrite the ‘request’ attribute of the supplied object.

webpack.config.js配置

1

new webpack.NormalModuleReplacementPlugin(resourceRegExp, newResource)

案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const webpack = require('webpack');
const path = require('path');
module.exports = {
  entry: './test.js',
  resolve: {
    extensions: ['.js']
  },
  output: {
    path: __dirname,
    filename: 'test.bundle.js'
  },
  plugins: [
    new webpack.NormalModuleReplacementPlugin(
      new RegExp(`^${path.resolve('./string.js')}$`),
      function(result) {
        result.request = path.resolve('./string-replacement.js');
      }
    )
  ]
};

用途说明

()

webpack.config.js配置

1
2

案例

1
2