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'
})
...
]
