Vue学习笔记之Webpack的plugin的应用

1、概念：插件，它是对webpack本身的扩展，是一个扩展器，让webpack变得更加好用。

2、版权声明插件：BannerPlugin，但这个是webpack是自带的，所以可以不需要进行安装，在项目配置文件直接引用一下即可：const webpack = require（‘webpack’）

然后重新打包项目，在生成的js文件中增加一行版权申明：

3、打包HTML的插件：我们的目录结构中，index.html文件是在项目的根目录下的，在打包文件dist中是没有这个文件的，所以我们需要将index.html文件打包到dist文件夹中，此时就可以使用HTMLWebpackPlugin插件，此插件可以自动生成一个index.html文件（可以指定模板来生成），同时将打包的js文件，自动通过script标签插入到body中（所以原来的index.html中的引用bundle.js的代码就可以删除了，打包的时候会自定将js文件引入进去）。

安装此插件：cnpm install html-webpack-plugin@3.2.0 --save-dev

配置插件：先导入包，然后再使用此插件：

重新编译运行代码，在dist打包文件夹中自动产生一个index.html文件：

但是打包生成的index.html文件中与原来在根目录下的index.html文件中的少了一个

<div id="app"></div> 的引用，同时bundle.js的目录其实也不需要前面的 dist/ 这个目录了。

所以，我们可以在打包的时候，指定模板来生成正index.html文件：

原文件（可以将引用bundle.js的代码注释掉）：

自动增加dist路径的，可以在配置中去掉此配置：

同时，指定此文件为打包生成新文件的模板：

重新打包运行：

4、对js文件压缩（丑化js文件）插件：uglifyjs，对文件中一些空格、简化名称较长的变量等方式来压缩js文件的大小。

压缩插件的环境安装：cnpm install uglifyjs-webpack-plugin@1.1.1 --save-dev

配置文件：

原来的bundle.js文件：

通过压缩后的js文件：这样减少了不少文件大小。