一.认识plugin

webpack--Plugin_可选值

Loader：在加载模块的时候，通过test去匹配模块，处理和这个loader
Plugin：插件目的在于解决 loader 无法实现的其他事

二.CleanWebpackPlugin

每次打包前都会自动删除 上一次 生成的dist文件夹

npm install clean-webpack-plugin -D

const { CleanWebpackPlugin}  = require("clean-webpack-plugin")

module.exports = {
  // 其他省略
  plugins:[
    new CleanWebpackPlugin()
  ]
}

三.HtmlWebpackPlugin

1.生成基本的index.html

插件的基本作用就是生成html文件
在进行项目部署的时，必然也是需要有对应的入口文件index.html；
所以我们也需要对index.html进行打包处理

npm install html-webpack-plugin -D

webpack--Plugin_赋值_02

2.自定义模板数据填充生成入口index.html

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

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

webpack--Plugin_ico_03

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

webpack--Plugin_赋值_04

这是因为在编译template模块时，有一个BASE_URL：

webpack--Plugin_html_05

2.2 这个时候我们可以使用DefinePlugin插件

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

webpack--Plugin_自动生成_06

再次打包就可以找到 BASE_URL

webpack--Plugin_html_07

四. CopyWebpackPlugin

将单个文件 或 整个目录复制到打包后的文件内

例如： 将 favicon.ico 图标 赋值到 打包后的diss文件内:

npm install copy-webpack-plugin -D

接下来配置CopyWebpackPlugin即可：

复制的规则在patterns中设置；

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

webpack--Plugin_ico_08

复制成功！！！

webpack--Plugin_赋值_09

五. Mode配置

由于打包后的代码被压缩过,如果代码出现报错就不好调试

webpack--Plugin_可选值_10

配置介绍:

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

  • 默认值是production（什么都不设置的情况下）；
  • 可选值有：'none' | 'development' | 'production'

webpack--Plugin_html_11

解决办法:

webpack--Plugin_html_12

webpack--Plugin_自动生成_13