# webpack 中的 plugin

Webpack 的另一个核心是 PluginLoader 是用于特定的模块类型进行转换用于处理资源文件,而 Plugin 可以用于执行更加广泛的任务,比如打包优化、资源管理、环境变量注入等。例如:生成 html 文件、将 js/css 文件插入 html 文件中。

# CleanWebpackPlugin

CleanWebpackPlugin 的作用就是每次修改了一些配置,重新打包时,自动删除 dist 文件夹。

安装 CleanWebpackPlugin

npm install clean-webpack-plugin -D

配置 CleanWebpackPlugin

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

# HtmlWebpackPlugin

HtmlWebpackPlugin 的作用就是用于生成 index.html 入口文件。

安装 HtmlWebpackPlugin

npm install html-webpack-plugin -D

配置 HtmlWebpackPlugin

const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            title: "Asuhe" // 给 index.html 文件添加 title 标签内容
            // 指定我们要使用的模块所在的路径
            /*
            template: "./public/index.html"
            */
        })
    ]
}

有时候我们想使用自己的模板而不用默认的 html 模板,这时我们就需要修改模板 index.html 文件。html-webpack-plugin 的源码中,有一个 default_index.ejs 模块,我们若要定义自己的 html 模板只需要用 ejs 的语法修改该文件即可。

# DefinePlugin

DefinePlugin 是用于定义一些项目中的全局变量的,项目中所有文件都可以读取这些全局变量。它是一个 webpack 内置的插件,不需要单独安装

配置 DefinePlugin

const { DefinePlugin } = require("webpack");
module.exports = {
    plugins: [
        new DefinePlugin({
            BASE_URL: '"./"'
        })
    ]
}

# CopyWebpackPlugin

CopyWebpackPlugin 能够实现文件复制功能。使用 CopyWebpackPlugin 可以将指定目录下的文件复制到指定位置

安装 CopyWebpackPlugin

npm install copy-webpack-plugin -D

配置 CopyWebpackPlugin

// webpack.config.js -> plugin
module.exports = {
    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: "public", // 设置从哪一个源中开始复制
                    //to: "xxx" 复制到的位置,可以省略,会默认复制到打包的目录下
                    globOptions: { // 设置一些额外的选项,其中可以编写需要忽略的文件
                        ignore: [
                            '**/.DS_Store',
                            '**/index.html'
                        ]
                    }
                }
            ]
        })
    ]
}

# webpack 中的 mode