Webpack使用教程六（Plugins）

最新推荐文章于 2025-09-10 19:44:49 发布

weixin_33858249

最新推荐文章于 2025-09-10 19:44:49 发布

阅读量60

点赞数

CC 4.0 BY-SA版权

文章标签： webpack json ViewUI

原文链接：http://www.cnblogs.com/xfshen/p/5945983.html

本文介绍如何使用Webpack内置的BannerPlugin，在构建后的bundle文件顶部添加版权信息等字符串。通过配置Webpack插件，可以在不安装额外依赖的情况下轻松实现此功能。

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
    }
};