• 关于文档
• 1. 概览
• 1. 开始
  • 2.1. 动机
  • 2.2. webpack是什么
  • 2.3. 安装
  • 2.4. 用法
  • 2.5. Require Modules
  • 2.6. Vendor Modules
  • 2.7. 使用 Loaders
  • 2.8. 使用 Plugins
  • 2.9. 工具
  • 2.10. 故障处理
• 1. 教程与例子
  • 3.1. 开始
  • 3.2. 教程列表
  • 3.3. 示例
• 1. 指南
  • 4.1. CommonJs
  • 4.2. AMD
  • 4.3. 对于browserify用户
  • 4.4. 代码拆分
  • 4.5. Stylesheets
  • 4.6. 性能优化
  • 4.7. 长期缓存
  • 4.8. 如何编写loader
  • 4.9. 如何编写插件
  • 4.10. 多入口点
  • 4.11. 库和扩展
  • 4.12. Shimming modules
  • 4.13. 测试
  • 4.14. 构建性能
  • 4.15. 热替换
  • 4.16. Comparison
• 1. webpack with
  • 5.1. grunt | Usage with grunt
  • 5.2. gulp | 使用gulp
  • 5.3. bower | Usage with bower
  • 5.4. karma | Usage with karma
• 1. Lists
  • 6.1. loader conventions
  • 6.2. List of loaders
  • 6.3. List of plugins
  • 6.4. List of hints
  • 6.5. 配置
  • 6.6. CLI
  • 6.7. Node.js API
  • 6.8. API in modules
  • 6.9. Loaders
  • 6.10. Plugins
  • 6.11. Context
  • 6.12. Resolving
  • 6.13. Hot Module Replacement
  • 6.14. Dev Tools
    • 6.14.1. webpack-dev-server
    • 6.14.2. webpack-dev-middleware
• 1. Development
  • 7.1. Changelog
  • 7.2. Roadmap
  • 7.3. Ideas
  • 7.4. Contributing
• Published with GitBook

webpack doc

插件可以完成更多 loader 不能完成的功能。 Use plugins to add functionality typically related to bundles in webpack.

比如 BellOnBundlerErrorPlugin 可以在build的过程中给出错误提示.

内置 plugins

插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。

// webpack should be in the node_modules directory, install if not.
var webpack = require("webpack");
module.exports = {
    plugins: [
        new webpack.ResolverPlugin([
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        ], ["normal", "loader"])
    ]
};

其它 plugins

Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。:

npm install component-webpack-plugin

可以这么使用:

var ComponentPlugin = require("component-webpack-plugin");
module.exports = {
    plugins: [
        new ComponentPlugin()
    ]
}

当通过npm安装第三方插件时候建议用这个工具:webpack-load-plugins 它会检查你的依赖里面的所有第三方插件并懒加载之.

See also

• plugin列表