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中进行配置。