%20(2).svg)
项目简介
本项目名为 "webpack-cdn-replace-plugin"，是一个基于Webpack的插件项目。其核心功能是解决项目文件上传到CDN后手动替换地址的繁琐问题。该插件不依赖特定的上传服务，开发者可以自由选择心仪的CDN上传服务，并且能方便地集成到Webpack构建流程中。
项目的主要特性和功能
- 自动完成CDN地址替换，在构建过程中将本地文件路径自动转换为CDN地址。
- 上传方式灵活，开发者可通过自定义上传处理函数来选择合适的CDN上传服务。
- 配置选项丰富，涵盖上传函数、缓存启用以及文件类型等参数，满足不同项目的多样化需求。
- 具备友好的错误处理机制，在上传或替换过程中出现错误时，会给出清晰的错误提示。
安装使用步骤
步骤一：安装插件
使用以下命令进行安装：
bash
npm i -D webpack-cdn-replace-plugin
yarn add -D webpack-cdn-replace-plugin
pnpm add -D webpack-cdn-replace-plugin
步骤二：配置Webpack
在webpack.config.js文件中引入并使用插件：
```javascript
const { UploadPlugin } = require('webpack-cdn-replace-plugin');
module.exports = {
mode: 'production',
output: {
publicPath: '',
// ...其他output配置
},
// ...其他webpack配置
plugins: [
new UploadPlugin({
uploadFn: async (path, fileName) => {
// 调用CDN上传API并返回CDN地址
return http://test.cdn/${fileName};
},
// 可配置其他参数，如cache、types等
})
]
};
```
步骤三：注意事项
publicPath必须设置为空，否则JS文件中的CDN地址可能会出错。- 根据项目实际需求配置
options中的参数，例如uploadFn、cache和types等。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】