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字符串。。