%20(2).svg)
项目简介
本项目是一个专门用于小程序开发的基于Webpack的图片资源打包工具。它把图片资源与源代码分离，将图片上传至云端，有效减少小程序包体积。该插件支持本地静态资源服务和云端上传两种模式，还有增量上传功能，优化了开发体验与资源管理效率。
项目的主要特性和功能
- 图片资源分离：将小程序里的图片资源和源代码分开，便于管理和优化。
- 云端上传：可通过配置把图片资源上传到云端服务器。
- 增量上传：依据生成的
manifest.json文件实现增量上传，提升上传效率。 - 两种模式支持：支持本地静态资源服务模式和云端上传模式，可按需灵活选择。
- Taro框架集成：能与Taro框架无缝集成，方便在Taro项目中使用。
安装使用步骤
假设用户已下载本项目的源码文件。
1. 安装插件
在项目根目录下执行以下命令安装插件：
bash
npm install cloud-image-plugin --save
2. 配置插件
在Webpack配置文件（如webpack.config.js）中引入插件并进行配置。配置包含设置上传模式、云端访问地址和自定义上传函数等。
```js
const CloudImagePlugin = require('cloud-image-plugin');
module.exports = { plugins: [ new CloudImagePlugin({ mode: 'remote', // 运行模式: remote 模式会实时上传，local 仅使用本地静态资源服务 publicPath: 'https://oss.com/my-app', // 需要上传的云端访问地址 uploadToCloud: (resources, manifest, cloudManifest) => { // 自定义上传函数 oss.batchUpload(resources); }, }), ], module: { rules: [ { test: /.(png|jpeg|gif|ttf|woff|woff2)/, loader: CloudImagePlugin.loader, }, ], }, }; ```
3. 使用插件
在项目中引用图片资源时，用相对路径引用图片，插件会自动处理这些资源，将其转换为云端URL的形式。
4. Taro框架使用
在Taro项目中，需修改配置文件的postcss.url模式为copy，并通过webpackChain添加插件配置。
```js
module.exports = {
mini: {
postcss: {
url: {
config: {
url: 'copy',
},
},
},
webpackChain: (chain) => {
chain.module.rules.delete('image');
chain.module.rules.delete('font');
chain.merge({
plugin: {
cloud: {
plugin: CloudImagePlugin,
args: [
{
publicPath: 'https://oss.com/my-app',
uploadToCloud: (resources, manifest, cloudManifest) => {
return Promise.all(
resources.map((item) => {
const name = item.path;
const absPath = item.file;
// 自定义上传逻辑
})
);
},
},
],
},
},
module: {
rule: {
cloud: {
test: /\.(png|jpeg|jpg|gif|ttf|woff|woff2)/,
loader: CloudImagePlugin.loader,
},
},
},
});
},
}, }; ```
注意事项
- 使用插件前，要确保已了解并配置好相关的云端存储服务。
- 自定义上传函数时，需根据实际需求实现文件上传逻辑。
- 在Taro框架中使用时，要按指定步骤修改配置文件并添加插件配置。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】