Webpack 插件

什么是 Webpack 插件

插件是对 javascript 代码进行逻辑处理的模块。

Config 配置型插件

1
2
3
4
5
6
new webpack.NormalModuleReplacementPlugin(
    resourceRegExp, 
    newResource
    // 如果是相对路径，则是相对于被替换模块的位置；
    // 也可以是一个函数。
    )

关于 context，详见文档

1
2
3
4
5
6
new webpack.ContextReplacementPlugin(
    resourceRegExp, 
    [newContentResource],
    [newContentRecursive],
    [newContentRegExp]
    )

1
2
3
4
new webpack.IgnorePlugin(
    requestRegExp, 
    [contextRegExp]
    )

预加载模块以提升性能。

1
2
3
4
5
6
new webpack.PrefetchPlugin(
    [context], 
    // 预加载的绝对路径
    request
    // 引入模块的字符串
    )

1
2
3
4
5
new webpack.ResolverPlugin(
    [plugins], 
    [types]
    // 可选值：normal, context, loader
    )
1
2
3
new webpack.ResolverPlugin.FileAppendPlugin(
    [plugins]
    )
1
2
3
4
5
new webpack.ResolverPlugin([
    new webpack.ResolverPlugin.FileAppendPlugin(
        ['/dist/compiled-moduled.js']
    )
])

设置可以通过 process.env 获取的环境变量。

1
2
3
4
5
new webpack.EnvironmentPlugin([
  "NODE_ENV"
])
// e.g:
var env = process.env.NODE_ENV;

Output 输出型插件

在打包后的块文件顶部添加额外内容。

1
2
3
4
5
6
7
new webpack.BannerPlugin(
    banner, 
    // 写在注释里面的字符串。
    options
    // options.raw：设置为 true 时，则不会写在评论里。
    // options.entryOnly：是否只添加到入口文件。
    )

Optimize 优化型插件

将文件去重以减小打包文件。去重后的模块只存在一个实例。

1
2
3
new webpack.optimize.DedupePlugin(
    [files]
)

不建议在开发模式中运用。

设置生成的块文件的最大数目。超过的文件会合并起来。

1
2
3
4
5
6
new webpack.optimize.LimitChunkCountPlugin(
    options
    // options.maxChunks
    // options.chunkOverhead
    // options.entryChunkMultiplicator
)

将阈值以下的块文件合并。

1
2
3
4
new webpack.optimize.MinChunkSizePlugin(
    options
    // options.minChunkSize
)

1
2
3
4
new webpack.optimize.OccurrenceOrderPlugin(
    preferEntry
    //
)