webpack可以通过插件进行功能扩展。webpack拥有很多的内置插件和第三方插件。下面以webpack自带的插件bannerPlugin为例,说明插件的简单用法。bannerPlugin可以将任何字符串加到生成的bundle文件的顶部(例如版权信息等)。因为bannerPlugin是内置的,我们无需用npm进行安装。我们对webpack配置文件进行修改(源码下载):
var webpack = require('webpack'); module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.json$/,
loader: "json"
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}
]
},
plugins: [
new webpack.BannerPlugin("Copyright webpack")
],
devServer: {
contentBase: "./public",
colors: true,
historyApiFallback: true,
inline: true
}
};
运行webpack命令,然后打开bundle.js文件,就可以看到bundle文件顶部多了Copyright webpack字符串。源码下载。