Plugin

认识plugin

除了loader plugin也是webpack的核心

官方中的描述：

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可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等；

cleanWebpackPlugin

  • 当修改了一些配置后需要重新打包我们之前要手动删除打包后的文件夹
  • 但是我们可以借助一个插件帮助我们完成 cleanWebpackPlugin
  • 安装 这个插件 npm install clean-webpack-plugin -D
  • 在插件中进行配置
1
2
3
4
5
6
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports= {
  plugins: [
        new CleanWebpackPlugin()
    ]}

HtmlWebpackPlugin

当要部署我们的dist文件夹到服务器时 需要一个入口文件index.html 所以我们需要对index.html进行打包处理

我们可以用到HtmlWebpackPlugin这个插件

在html-webpack-plugin的源码中，有一个default_index.ejs模块； 它是通过ejs模板生成html文件

npm install html-webpack-plugin -D

1
2
3
new HtmlWebpackPlugin({
            title:"coderhyp",
        })

有的时候我们需要自定义HTML模板 来实现我们的需求

  • 比如添加noscript 标签 在用户的JavaScript被关闭时，给予相应的提示
  • 或者 vue react项目需要一个 div id为app的根标签挂载

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

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

DefinePlugin

在编译template模块时，有一个BASE_URL：

  • <link rel="icon" href="<%= BASE_URL %>favicon.ico">；
  • 但是我们并没有设置过这个常量值，所以会出现没有定义的错误；

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

1
2
3
4
5
const {DefinePlugin} = require('webpack');

 new DefinePlugin({
            BASE_URL: '"./"'
        }),

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

CopyWebpackPlugin

  • 在vue的打包过程中，如果我们将一些文件放到public的目录下，那么这个目录会被复制到dist文件夹中。
  • 这个复制的功能，我们可以使用CopyWebpackPlugin来完成；

npm install copy-webpack-plugin -D

配置CopyWebpackPlugin

  • 复制的规则在patterns中设置；
  • from：设置从哪一个源中开始复制；
  • to：复制到的位置，可以省略，会默认复制到打包的目录下；
  • globOptions：设置一些额外的选项，其中可以编写需要忽略的文件：
    • .DS_Store：mac目录下回自动生成的一个文件；
    • index.html：也不需要复制，因为我们已经通过HtmlWebpackPlugin完成了index.html的生成；

mode

mode配置

Mode配置选项，可以告知webpack使用响应模式的内置优化：

  • 默认值是production（什么都不设置的情况下）；

  • 可选值有：’none’ | ‘development’ | ‘production’；