[译]开启webpack之旅( 四 ):使用插件

本文介绍了Webpack内置及第三方插件的应用方式。内置插件如ResolverPlugin可通过配置文件直接使用,而第三方插件则需通过npm安装,并推荐使用webpack-load-plugins工具进行懒加载优化。

原文地址
在webpack中通常使用插件来添加一些与打包相关的功能,例如BellOnBundlerErrorPlugin会通知你在构建过程的有哪些错误。

内置插件

可以在web pack的配置文件中使用内置插件特性:

// 要先安装webpack 
var webpack = require("webpack");

module.exports = {
    plugins: [
        new webpack.ResolverPlugin([
            new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
        ], ["normal", "loader"])
    ]
};

第三方插件

非内置插件则需要安装,如果发布在npm则通过npm安装,如果没有则通过别的方式:

npm install component-webpack-plugin

使用方法如下:

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

当你需要通过npm安装第三方插件时,我们推荐结合webpack-load-plugins这款工具使用

它可以检测你所依赖的所有第三方插件并实现懒加载。

详见list of plugins

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值