Webpack中插件介绍的不多——–用到插件的时候再补插件功能；
1 Webpack的功能（bundles）
——通过plugins来实现；
——调用plugins之前需要通过npm安装；
调用plugins：—-在webpack.config.js中用require()——–除了亲儿子（内置插件）和{安装了实现lazyload的插件后}不需要require
webpack-load-plugins
--------类似于gulp的gulp-load-plugins（卧槽，名字都差不多）
--------调用webpack-load-plugins后不需要require(plugins)，在需要别的插件的时候webpack内部自动require()
var webpack = require("webpack");
//安装webpack-load-plugins后，就不用require()下边的插件了
var ComponentPlugin = require("component-webpack-plugin");
module.exports = {
plugins: [
//此乃webpack亲儿子，内建plugins不需要require
new webpack.ResolverPlugin([
new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin("bower.json", ["main"])
], ["normal", "loader"]),
//别人家的孩子
new ComponentPlugin()
]
};
2 使用webpack.ProvidePlugin加载不支持AMD或者CommonJS等插件
把一个全局变量插入到所有的代码中，在config.js里面配置
plugins: [
new HtmlwebpackPlugin({
title: 'Hello World app'
}),
//provide $, jQuery and window.jQuery to every script
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]然后，
在入口文件entry.js中
//import $ from 'jquery';------这个不需要了 因为$, jQuery, window.jQuery都被直接注入，可以直接使用了
愉快的用$()
3 使用内建CommonsChunkPlugin插件分离app.js和第三方库
如果不分离第三方库的话，可能会造成build的文件非常大，减慢加载速度；
首先—-在entry入口文件中将第三方库分离
entry: {
app: path.resolve(APP_PATH, 'index.js'),
//添加要打包在vendors里面的库
vendors: ['jquery', 'vue']
}然后，添加CommonsChunkPlugin配置
plugins: [
//这个使用uglifyJs压缩你的js代码
new webpack.optimize.UglifyJsPlugin({minimize: true}),
//把入口文件里面的数组打包成verdors.js
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
]
打包后，会将第三方库分离成单独的js文件；
4 多入口页面方案
———当页面不再是SPA（single page app）
模拟需求：
有两个页面，一个是app.html页面，需要引用vendor.js和app.js两个文件；还有一个mobile.html页面，需要引用vendor.js和mobile.js两个文件；
第一步：自定义模板index.html和mobile.html自动引用js文件：
index.html
<!DOCTYPE html>
<html>
<head>
//注意：这里的htmlWebpackPlugin对象标识符是固定的，必须是这个，必须这样写，必须！
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<h3>Welcome to webpack</h3>
</body>
</html>
mobile.html
<!DOCTYPE html>
<html>
<head>
//注意：这里的htmlWebpackPlugin对象标识符是固定的，必须是这个，必须这样写，必须！
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<h3>Welcome to mobile page</h3>
</body>
</html>
第二步：在webpack.config.js中：
entry: {
//三个入口文件，app, mobile和 vendors
app: path.resolve(APP_PATH, 'index.js'),
mobile: path.resolve(APP_PATH, 'mobile.js'),
vendors: ['jquery', 'moment']
},
output: {
path: BUILD_PATH,
//注意用一个数组[name]来代替固定名称，它会根据entry的入口文件名称生成多个js文件，这里就是(app.js,mobile.js和vendors.js)
filename: '[name].js'
}
第三步：生成页面
//Template的文件夹路径
var TEM_PATH = path.resolve(ROOT_PATH, 'templates');
...
plugins: [
...
//创建了两个HtmlWebpackPlugin的实例，生成两个页面
//注意：这里的HtmlwebpackPlugin构造器名字是你require插件时自定义的，自定义的！
new HtmlwebpackPlugin({
title: 'Hello World app',
template: path.resolve(TEM_PATH, 'index.html'),
filename: 'index.html',
//chunks这个参数告诉插件要引用entry里面的哪几个入口
chunks: ['app', 'vendors'],
//要把script插入到标签里
inject: 'body'
}),
new HtmlwebpackPlugin({
title: 'Hello Mobile app',
template: path.resolve(TEM_PATH, 'mobile.html'),
filename: 'mobile.html',
chunks: ['mobile', 'vendors'],
inject: 'body'
})
...
]
