视频学习笔记07

视频学习笔记

webpack的plugin学习

plugin是什么

plugin是插件的意思，通常是对于某个现有的架构进行扩展
webpack中的插件，就是对webpack现有功能的各种扩展，比如打包优化，文件压缩等等

loader和plugin的区别

loader主要是用于转换某些类型的模块，是一个转换器
plugin是插件，它是对webpack本身的扩展，是一个扩展器

webpack中自带的plugin

在webpack.config.js中配置
首先引入const webpack = require('webpack')
在webpack.config.js的plugins中配置插件

new webpack.BannerPlugin('最终版权所有归属'),
//可以说明代码是否是开源

打包html的plugin

我们的index.html文件时存放在项目的根目录下的
在真实发布项目时，发布的是dist文件夹中的内容，但是dist中如果没有index.html文件，那么打包的js文件夹就没有意义了
将index.html文件打包到dist文件夹中，使用HtmlWebpackPlugin插件

HtmlWebpackPlugin插件可以做到的事情

自动生成一个index.html文件
将打包的js文件，自动通过script标签插入到body中
安装HtmlWebpackPlugin
npm install html-webpack-plugin --save-dev
在webpack.config.js的plugins中配置插件:
template表示根据什么模板来生成index.html文件

      new HtmlWebpackPlugin({
        template: 'index.html'
      }),

js压缩的plugin

在项目发布之前，我们需要对js等文件进行压缩
可以使用第三方插件uglifyjs-webpack-plugin，并且指定版本号1.1.1，和cli2保持一致
安装：npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
修改webpack.config.js文件，使用插件
在webpack.config.js的plugins中配置插件:
new UglifyjsWebpackPlugin()