简介
filemanager-plus-webpack-plugin 是一个 webpack 插件，它可以在 webpack 构建时自动将指定文件复制到指定目录中。这个插件很适合用于构建前端静态网站时自动复制文件，比如生成的网站图标和一些静态资源等。
安装
可以通过 npm 快速安装：
npm install filemanager-plus-webpack-plugin --save-dev
使用
在 webpack 的配置文件中引入这个插件并进行基本配置：
const FileManagerPlusPlugin = require('filemanager-plus-webpack-plugin');
module.exports = {
// ...
plugins: [
new FileManagerPlusPlugin({
onEnd: {
copy: [
{ source: 'src/favicon.ico', destination: 'dist' },
{ source: 'src/assets/*', destination: 'dist/assets' }
]
}
})
]
// ...
}在这个例子中，我们指定了两个文件需要拷贝到目标文件夹 dist 中，分别是 favicon.ico 和 assets 文件夹下的所有文件。其中，source 是源文件，destination 是目标文件夹。
如果不指定 destination，那么插件会将源文件复制到 webpack 的输出目录中。
进阶
FileManagerPlusPlugin 还有很多高级功能，包括指定覆盖模式、先删除目标文件夹、自定义日志等。这里简单介绍一下：
指定覆盖模式
在默认的情况下，如果目标文件夹已经存在同名文件，那么源文件将不会被复制到此目标文件夹中。可以通过设置参数 overwrite: true 来覆盖已有文件，或者设置参数 overwrite: 'all' 来覆盖全部文件。
new FileManagerPlusPlugin({
onEnd: {
copy: [
{
source: 'src/favicon.ico',
destination: 'dist',
overwrite: true
},
{
source: 'src/assets/*',
destination: 'dist/assets',
overwrite: 'all'
}
]
}
})先删除目标文件夹
在默认的情况下，源文件会被复制到目标文件夹下，但目标文件夹本身不会被删除。如果需要在复制前先删除目标文件夹，可以设置参数 deleteDestination: true。
new FileManagerPlusPlugin({
onEnd: {
copy: [
{
source: 'src/assets/*',
destination: 'dist/assets',
deleteDestination: true
}
]
}
})自定义日志
默认情况下，插件会在控制台输出一些复制的日志信息。如果需要修改日志输出，可以通过传入一个函数来自定义输出格式。
new FileManagerPlusPlugin({
onEnd: {
copy: [
{
source: 'src/assets/*',
destination: 'dist/assets',
log: (source, destination) => {
console.log(`${source} -> ${destination}`);
}
}
]
}
})示例代码
完整的示例代码可以在 GitHub 上找到，这里给出简单的链接：
https://github.com/ieatjapan/filemanager-plus-webpack-plugin-demo
总结
FileManagerPlusPlugin 是一个非常好用的 webpack 插件，它可以大大简化前端构建过程中的一些繁琐操作。在使用时需要注意基本配置，如果需要更多功能可以查看文档进行进阶设置。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673dffb81d47349e53c8e