plugin的使用

一、认识plugin

1.什么是plugin?

plugin就是插件的意思，用于对某个现有架构进行扩展。
webpack的plugin，就是webpack的扩展功能，比如压缩文件、打包优化

2.plugin和loader的区别

loader用于转换某些类型的模块，是转换器，
plugin是对现有架构进行扩展，是扩展器。

3、plugin的使用

1.利用npm下载需要的plugin（webpack内置的插件不需要安装）
2.在webpack.config.js中的plugins中配置插件。

二、webpack内置plugin（添加版权plugin）

/*导入webpack*/
const webpack = require('webpack');

module.exports = {
    ……
    plugins:[
        new webpack.BannerPlugin('最后版权归XXX所有')
    ]
}

/*! 最终版权归XXX所有 */
/******/ (function(modules) { // webpackBootstrap

三、打包html的plugin

1.为什么要打包index.html

目前，index文件存放在项目的根目录下，但是真实开发中，发布的是dist文件中的内容，但是dist文件中没有index.html文件，打包的js文件也没有意义。
所以可以利用webpack的HtmlWebpackPlugin插件帮助打包index.html

2.HtmlWebpackPlugin做的事

1.自动生成html文件（可以指定模板生成）
2.自动将dist下的js文件引入到html文件中

HtmlWebpackPlugin的使用

1.npm安装

npm install html-webpack-plugin@(可指定版本) --save-dev

2.导入插件

/*导入webpack*/
const webpack = require('webpack');

3.修改webpack.config.js中的plugins

  plugins: [
      new webpack.BannerPlugin('最终版权归aaa所有'),
      new HtmlWebpackPlugin()
  ]

4.指定模板生成
HtmlWebpackPlugin插件在dist文件下自动生成了index.html，并在文件中引入了打包的js文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="dist/bundle.js"></script></body>
</html>

但是，并没有生成根目录下html文件中的div结构
所以可以在配置中添加template属性，可以根据根目录下的html模板自动生成文件

  plugins: [
      new webpack.BannerPlugin('最终版权归aaa所有'),
      new HtmlWebpackPlugin({
        template: 'index.html'
      })
  ]

自动生成了div结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    
    <div id="app">
    </div>
<script src="./dist/bundle.js"></script>
<script type="text/javascript" src="dist/bundle.js"></script></body>
</html>

四、js压缩

1.为什么要压缩js

最终发布的是打包在dist文件中的js，为了缩小文件的体积，会利用UglifyjsWebpackPlugin插件对该js进行丑化，删去空格注释修改变量名，以达到缩小文件体积的效果。

2.UglifyjsWebpackPlugin的使用

1.npm下载插件

npm install uglifyjs-webpack-plugin@(可指定版本) --save-dev

2.导入插件

/*导入UglifyjsWebpackPlugin插件*/
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');

3.webpack.config.js中的plugins中配置插件

  plugins: [
      new webpack.BannerPlugin('最终版权归aaa所有'),
      new HtmlWebpackPlugin({
        template: 'index.html'
      }),
      new UglifyjsWebpackPlugin()
  ]

原本dist文件中打包的js

/******/ ([
/* 0 */
/***/ (function(module, exports) {

var g;

// This works in non-strict mode
g = (function() {
    return this;
})();

try {
    // This works if eval is allowed (see CSP)
    g = g || Function("return this")() || (1,eval)("this");
} catch(e) {
    // This works if the window reference is available
    if(typeof window === "object")
        g = window;
}

丑化后的js

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};