uni-app打包小程序根据不同编译条件打包不同静态素材目录

阿不阿

已于 2024-06-13 21:06:31 修改

阅读量1.4k

点赞数 1

分类专栏： uni-app 文章标签：小程序 uni-app 多模板打包

于 2023-01-20 15:15:20 首次发布

本文链接：https://blog.csdn.net/eclothy/article/details/128741757

版权

uni-app 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在uni-app开发小程序时，为减小包体积，文章介绍了如何根据package.json中的模板变量，利用cleanWebpack插件在构建时删除未使用的静态素材目录。通过在vue.config.js中配置CleanWebpackPlugin，仅保留当前运行模板对应的static目录。

摘要由CSDN通过智能技术生成

在uni-app开发小程序的时候，我们经常有这样的需求，一个小程序，拥有多个不同样式的模板，发布的时候，为了减少包的体积，我们希望只打包当前使用的模板对应的静态素材目录，而其他模板的目录不打包进去。

在package.json中定义的模板变量如下：


"uni-app": {
        "scripts": {
                "tpl_more": {
                        "title": "猫模板",
                        "env": {
                                "UNI_PLATFORM": "mp-weixin"
                        },
                        "define": {
                                "TPL_MORE": true
                        }
                },
                "tpl_mars": {
                        "title": "mars火星模板",
                        "env": {
                                "UNI_PLATFORM": "mp-weixin"
                        },
                        "define": {
                                "TPL_MARS": true
                        }
                }
        }
}

每一个模板的静态素材对应在static下同名的目录，如下图：

如何实现Hbuilder运行tpl_more时，只打包static/tpl_more；运行tpl_mars时，只打包static/tpl_mars呢。

这里需要使用webpack的cleanWebpack插件，实现逻辑是，在build包以后，按package.json中的编译条件，删除static下多余的素材目录，在项目根目录下创建vue.config.js，代码如下：


const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin') //最新版本copy-webpack-plugin插件暂不兼容，推荐v5.0.0
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

//获取package.json定义的模板变量
const Templates = process.UNI_SCRIPT_DEFINE;
let clearDir = [];
console.log("===Templates===", Templates);
for(let key in Templates){
    //该模板未启用
    if(!Templates[key]){
        clearDir.push("static/"+key.toLowerCase());
    }
}

module.exports = {
    configureWebpack: {
        plugins: [
            //删除未启用的模板对应的静态资源目录
            new CleanWebpackPlugin({cleanAfterEveryBuildPatterns:clearDir}), 
           //  new CopyWebpackPlugin([
              //   {
                 //    from: path.join(__dirname, 'static/tpl_mars'),
                 //    to: path.join(__dirname, 'unpackage', 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'static/tpl_mars2'),
                    // //ignore: ['*'],
              //   }
           //  ]),    
        ]
    }
}

在Hbuilder运行tpl_more时，在微信开发者工具中，查看static目录，只有tpl_more子目录，没有tpl_mars；同理，运行tpl_mars时，static目录下也只有tpl_mars子目录。