1 Webpack的功能（bundles）

------通过plugins来实现；

------调用plugins之前需要通过npm安装；

调用plugins：----在webpack.config.js中用require()--------除了亲儿子（内置插件）和{安装了后}不需要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    //注意：这里的htmlWebpackPlugin对象标识符是固定的，必须是这个，必须这样写，必须！    <%= htmlWebpackPlugin.options.title %>        Welcome to webpack
  mobile.html          //注意：这里的htmlWebpackPlugin对象标识符是固定的，必须是这个，必须这样写，必须！    <%= htmlWebpackPlugin.options.title %>        Welcome to mobile page

第二步：在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'  })  ...]