webpack学习笔记-07 Plug-in 插件

一、什么是Plug-in?

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

二、BannerPlugin 版权信息插件

由于该插件是webpack自带的，所以只需要直接导入即可。

2.1 导入 webpack库

const webpack = require('webpack')

2.2 实例化该插件

module.exports = {
  ...
  // 实例插件
  plugins: [
    new webpack.BannerPlugin("最终版权归PengSir所有"),
  ],
  ...
}

2.3 效果

三、HtmlWebpackPlugin 生成index.html

HtmlWebpackPlugin插件可以为我们做这些事情：

• 自动生成一个index.html文件(可以指定模板来生成)
• 将打包的js文件，自动通过script标签插入到body中

3.1 安装

npm install html-webpack-plugin --save-dev

3.2 在webpack.config.js中引入

const htmlWebpackPlugin = require("html-webpack-plugin")

3.3 实例插件

module.exports = {
  //code ...
  
  // 实例插件
  plugins: [
    new htmlWebpackPlugin()
  ],
  
  //code ...
}

3.4 需要解决的问题

我们先来看一下我们打包后生成的index.html长什么样：

可以发现我们有两个东西，需要处理：

1. JS文件的目录不对
2. 没有 Vue的挂载对象,也就是没有

首先我们先来解决第一个问题：
可能有些小伙伴没有这个问题，为什么呢？因为这是我们之前配置导致的，只需要删除或者注释掉之前的配置即可：
打开webpack.config.js的module.exports 下的output，把publicPath去掉即可。

然后，我们再来看第二个问题，没有 挂载对象这个问题，具体解决步骤如下：
我们在new htmlWebpackPlugin ()的时候其实是可以，传入参数的，
这里我们传入一个对象tempalte用于检测是否指定了模板。

也就是说，我们修改一下实例插件的代码为如下所示：

module.exports = {
  //code ...
  
  // 实例插件
  plugins: [
    new htmlWebpackPlugin({
      template: "index.html"
    })
  ],
  
  //code ...
}

这么做以后，该插件则会使用webpack.config.js当前目录下的index.html为模板。
这时候我们再打包看一下：

perfect

四、压缩JS Plugin

4.1 安装

npm install [email protected] --save-dev

4.2 引入

const uglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin")

4.3 实例

module.exports = {
  //code ...
  
  // 实例插件
  plugins: [
    new uglifyjsWebpackPlugin()
  ],
  
  //code ...
}

接下来我们打包看一下：

啊哈，perfect