webpack的plugins相关常用插件

376 阅读2分钟

该文档用于存储各类插件(plugins)的安装和使用方式

CleanWebpackPlugin

CleanWebpackPlugin是在项目打包时先将上一次所打包的文件夹进行一次清除后再去打包的一种插件

能够避免每次打包时都需手动删除一次上一次打包的繁琐操作

安装CleanWebpackPlugin
npm i install clean-webpack-plugin -D
使用CleanWebpackPlugin
/* webpack.config.js文件中 */

// 先在头部通过CommonJS方式引入
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
// 在plugins数组中写入
plugins:[
    new CleanWebpackPlugin()
]

HtmlWebpackPlugin

HtmlWebpackPlugin插件能够在打包后帮助我们生成html文件,因为webpack打包是没有帮我们生成html文件的,所以我们需要这个插件帮助我们生成html文件,同时也可以对html文件进行一些另外的配置

安装HtmlWebpackPlugin
npm i html-webpack-plugin -D
使用HtmlWebpackPlugin
/* webpack.config.js文件中 */

// 先在头部通过CommonJS方式引入,这里要注意,该插件通过默认暴露的类,所以无需解构
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 在plugins数组中写入
plugins:[
    new HtmlWebpackPlugin()
]

// 该插件可额外配置:
new HtmlWebpackPlugin({
    // template 可指定打包时根据哪个html模板去打包
    template:"./public/index.html",
    // title 可指定打包后的index的标题
    title:"Title"
})

DefinePlugin

DefinePlugin是webpack内置的一个插件,它能够定义一些变量,使我们能够在编译后的html文件中通过**<%= 变量 %>**的方式(EJS模块填充数据)使用这些变量。

使用DefinePlugin
/* webpack.config.js文件中 */

const {DefinePlugin} = require('webpack');

plugins:[
    new DefinePlugin({
        // BASE_URL 则是定义的变量
        BASE_URL:"./"
    })
]

CopyWebpackPlugin

CopyWebpackPlugin是能够让我们指定某些文件在编译后会被拷贝指编译后的指定目录下

安装CopyWebpackPlugin
npm i CopyWebpackPlugin -D
使用CopyWebpackPlugin
/* webpack.config.js文件中 */

const CopyWebpackPlugin = require('copy-webpack-plugin')

plugins:[
    new CopyWebpackPlugin({
        // patterns的配置指定哪些文件需要被copy
        // 该数组内是一个个的配置对象,一个对象代表一个copy
        // 一般我们只会用到一个对象,一种copy
        patterns:[
            {
                // from 指定哪个文件夹要被复制
                from:"public",
                // to 指定将要粘贴到哪个文件夹中
                to:"./",
                // globOptions 是哪些文件要被忽略
                globOptions:{
                    ignore:[
                        // 忽略上级以及上上级的所有文件夹中的所有index.html文件
                        "**/index.html"
                    ]
                }
            }
        ]
    })
]