vue3+ts学习（八）：webpack插件的使用CleanWebpackPlugin:重新打包时清空打包目录的插件 n

CleanWebpackPlugin:重新打包时清空打包目录的插件

npm install clean-webpack-plugin -D

// webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
    plugins: [
        new CleanWebpackPlugin(),
    ],
}

HtmlWebpackPlugin:打包目录下生成html模板的插件

DefinePlugin：为模板定义可使用的变量，webpack内置不需要下载

npm install html-webpack-plugin -D

// 模板放置在根目录下public文件夹内
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  // BASE_URL需要使用webpack内置的DefinePlugin插件定义变量
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  // 这里需要在htmlWebpackPlugin的配置项配置对应的属性
  <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly
    without JavaScript enabled. Please enable it to continue .
    </strong>
    <div id="app"></div>
  </noscript>
</body>
</html>

//webpack.config.js
// 打包目录生成html入口文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 允许在编译时创建全局常量，用<%= %>接收，webpack内置的 不需要单独安装
const { DefinePlugin } = require('webpack');

plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      title: "这是我的标题"
    }),
    new DefinePlugin({
      // 双引号里面是变量名 如果要传字符串则需要再加个单引号
      BASE_URL: "'./'"
    })
  ],

CopyWebpackPlugin:复制文件的插件，主要是将public的部分文件复制到打包后的目录下，例如favicon.ico npm install copy-webpack-plugin -D

//webpack.config.js
// 复制文件插件
const CopyWebpackPlugin = require('copy-webpack-plugin')
plugins: [
    new CopyWebpackPlugin({
      patterns : [
        {
          from:"public",
          to:"./",   // 可以不配置，默认是在打包的根目录下
          globOptions:{
            ignore:["**/index.html"]  // **/是代表该文件夹下的所有index.html都忽略
          }
        }
      ]
    })
  ],