webpack中的plugin

Webpack的另一个核心是Plugin，Loader是用于特定的模块类型进行转换用于处理资源文件，而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