plugin配置

UglifyJs Plugin——用于将打包后的代码压缩。

UgligyJsPlugin是webpack自带的插件，使用前定义一下即可，无需导入module：

var webpack = require('webpack');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
module.exports = {
    entry: './main.js',
    output: {
        filename: 'bundle.js'
    },
    plugins: [
        new uglifyJsPlugin({
            compress: {
                warnings: false
            }
        })
    ]
};

加载第三方插件：

var HtmlwebpackPlugin = require('html-webpack-plugin');
var OpenBrowserPlugin = require('open-browser-webpack-plugin');
module.exports = { 
    entry: './main.js',
    output: {filename: 'bundle.js'},
    plugins: [
        new HtmlwebpackPlugin({
            title: 'Webpack-demos',
            filename: 'index.html'
        }),
        new OpenBrowserPlugin({ 
            url: 'http://localhost:8080'
        })
    ]
};

注意：加载第三方插件必须先将module下载，然后在webpack.config.js中通过require命令引入。

html-webpack-plugin 插件：

这个插件的主要功能是自动生成一个index.html文件。index.html中会自动引入ouput中的js文件。

当多文件入口时，会产生多个output文件。这时index.html中会同时引入所有output文件，导致结果可能与预期不符。

个人建议在单入口项目中使用此插件。

open-browser-webpack-plugin 插件：

此插件在当项目使用webpack启动时，会自动在浏览器中将网页打开。打开网页地址可以在plugin的url中进行配置。