webpack-常用plugin及本地服务器配置

什么是plugin？

• plugin是webpack的插件，对现有的框架进行拓展，是为了方便人们使用。比如非常常见的vscode插件，chrome插件

webpack的插件有哪些功能呢？只有你想不到，没有开发者做不到，今天就来介绍几个常见的plugin

添加版权plugin

Name： BannerPlugin webpack自带的plugin作用： 为打包的文件添加版权声明以下是webpack.config.js文件的配置

• 首先引入webpack这个包，因为是自带的plugin。 但vscode里配置好插件后直接使用也会自动帮你引入
  
• 再plugins中声明这个插件
  BannerPulgin中的字符就是要添加的文字

打包html的plugin

为什么要用这个插件

• 我们在真实项目中，发布的是dist文件夹中的内容，但是dist文件夹中没有index.html文件就发布个寂寞了
• 所以，我们需要将index.html文件打包到dist文件夹中，这个时候就需要用到这个插件HtmlWebpackPlugin可以为我们做什么
• 自动生成一个index.html文件(可以由指定模板来生成)
• 将打包的js文件，自动通过script标签插入到body中，也就是说，我们之前要手动写的script标签也不需要了

安装

npm install html-webpack-plugin --save-dev (开发依赖) 版本 ^3.2.0

修改webpack.config.js配置
因为之前用file-loader打包图片时修改了路径，所以这里需要将路径改回来。 因为index文件和bundle.js已经在一个文件夹里了，如果不该src路径会出问题，找不到js文件。

压缩js减少大小的plugin

目的：

• 减少js大小，提高浏览器执行速度

安装：
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev 与cli2保持一致的版本号

修改webpack.config.js文件：