一、Plugin

Webpack的另一个核心是Plugin

官方有这样一段对Plugin的描述：

  • While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

  • 翻译过来就是：

    • Loader是用于特定的模块类型进行转换；
    • Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等；

3、webpack-plugin的使用 - 图1

CleanWebpackPlugin

前面我们演示的过程中，每次修改了一些配置，重新打包时，都需要手动删除build文件夹：

我们可以借助于一个插件来帮助我们完成，这个插件就是CleanWebpackPlugin

首先，我们先安装这个插件：

npm install clean-webpack-plugin -D

之后在插件中配置：

  1. const {CleanWebpackPlugin} = require('clean-webpack-plugin')
  2. plugins:[
  3.     new CleanWebpackPlugin()
  4.   ]

这样每次打包时就会自动删除之前的重新生成。

HtmlWebpackPlugin

另外还有一个不太规范的地方：

我们的HTML文件是编写在根目录下的，而最终打包的dist文件夹中是没有index.html文件的。

在进行项目部署的时，必然也是需要有对应的入口文件index.html

所以我们也需要对index.html进行打包处理

对HTML进行打包处理我们可以使用另外一个插件：

HtmlWebpackPlugin； npm install html-webpack-plugin -D

  1. const HtmlWebpackPlugin = require('html-webpack-plugin');
  2. plugins: [new CleanWebpackPlugin(), new HtmlWebpackPlugin()],

生成的文件：

  1. <!doctype html>
  2. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>Webpack App</title>
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">
  8.     <script defer="defer" src="bundle.js"></script>
  9. </head>
  11. <body></body>
  13. </html>

注意根目录下可以不用存在index.html了，可以自动生成到build文件夹下。

这个文件是如何生成的呢？

  • 默认情况下是根据ejs的一个模板来生成的
  • 在html-webpack-plugin的源码中，有一个default_index.ejs模块

default_index.ejs:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
  </body>
</html>

自定义HTML模板

如果我们想在自己的模块中加入一些比较特别的内容：

  • 比如添加一个noscript标签，在用户的JavaScript被关闭时，给予响应的提示
  • 比如在开发vue或者react项目时，我们需要一个可以挂载后续组件的根标签
  • 这个我们需要一个属于自己的index.html模块：

自定义index.html:

<!doctype html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>coderwhy webpack</title>
</head>

<body>
    <noscript>
        <strong>
            We're sorry but coderwhy webpack doesn't work properly without JavaScript                 enabled. Please enableit to continue.
        </strong>
    </noscript>
    <div id="app"></div>
    <script src="js/bundle.js"></script>
</body>

</html>

自定义模板数据填充

上面的代码中，会有一些类似这样的语法<% 变量 %>，这个是EJS模块填充数据的方式。

在配置HtmlWebpackPlugin时，我们可以添加如下配置：

  • template：指定我们要使用的模块所在的路径
  • title：在进行htmlWebpackPlugin.options.title读取时，就会读到该信息

这个时候编译还是会报错，因为在我们的模块中还使用到一个BASE_URL的常量

  • 这是因为在编译template模块时，有一个BASE_URL
  • 但是我们并没有设置过这个常量值，所以会出现没有定义的错误
  • 这个时候我们可以使用DefinePlugin插件
ERROR in Template execution failed: ReferenceError: BASE_URL is not defined

ERROR in   ReferenceError: BASE_URL is not defined

DefinePlugin

DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）

这个时候，编译template就可以正确的编译了，会读取到BASE_URL的值

const HtmlWebpackPlugin = require('html-webpack-plugin');
 plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      title: 'webpack项目',
    }),
    new DefinePlugin({
      BASE_URL: '"./"',
    }),
  ],

CopyWebpackPlugin

在vue的打包过程中，如果将一些文件放到public的目录下，那么这个目录会被复制到dist文件夹中。

这个复制的功能，我们可以使用CopyWebpackPlugin来完成

安装CopyWebpackPlugin插件：

npm install copy-webpack-plugin -D

接下来配置CopyWebpackPlugin即可：

  • 复制的规则在patterns中设置

    • pfrom：设置从哪一个源中开始复制
    • to：复制到的位置，可以省略，会默认复制到打包的目录下

    • globOptions：设置一些额外的选项，其中可以编写需要忽略的文件：

      • .DS_Store：mac目录下回自动生成的一个文件
      • index.html：也不需要复制，因为我们已经通过HtmlWebpackPlugin完成了index.html的生成；
const CopyWebpackPlugin = require('copy-webpack-plugin');
 new CopyWebpackPlugin({
      patterns: [
        {
          from: 'public',
          globOptions: {
            ignore: ['**.DS.store', '**/index.html'],
          },
        },
      ],
    }),

忽略文件这里不同版本不同写法。

以后慢慢研究吧。