Webpack使用教程六（Plugins）

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字符串。源码下载。