@canvases/ifcomp-config-loader/README.md

本项目提供了一个 Webpack Loader，用于在 Vue2 项目中进行条件编译功能。它允许你在 Web 和不同平台（如 `APP-PLUS`、`H5`、`MP-WEIXIN` 等）之间运用不同的业务组件。

### **README: UniApp 条件编译 Loader for Webpack + Vue2**

本项目提供了一个 Webpack Loader，用于在 Vue2 项目中进行条件编译功能。它允许你在 Web 和不同平台（如 `APP-PLUS`、`H5`、`MP-WEIXIN` 等）之间运用不同的业务组件。

---


## **📌 功能特点**
✅ **支持 `#ifcomp` 条件编译**，根据 `platform` 变量选择代码块。
✅ **适用于 Webpack + Vue2 项目**，可在**运行**和**打包**时自动处理条件编译。

---


## **📂 使用示例**

在 Vue2 组件或 JavaScript 代码中，你可以使用条件编译语法：

```js 
// #ifcomp  hellowrod
console.log('This is for hellowrod component');
// #endif
```

---


## **⚙ 安装与配置**

### **1️⃣ 安装 Loader**
你可以直接在项目中创建 `conditional-loader.js`，或者发布为 npm 包后安装：

```sh
npm install your-loader-name
```

---


### **2️⃣ 配置 Webpack**
在 `webpack.config.js` 中添加 Loader 配置：

```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use:{
            loader: './plugins/module-condition-loader.js',
            options: { platform: process.env.PLATFORM,
                entryJson: path.resolve(__dirname, 'manifest.json')
            } // 注入环境变量
        }
      }
    ]
  }
};
```

在 `package.json` 中添加不同平台的构建命令：

```json
"scripts": {
  "build:h5": "cross-env PLATFORM=H5 webpack --mode production",
  "build:app": "cross-env PLATFORM=APP-PLUS webpack --mode production",
  "build:wx": "cross-env PLATFORM=MP-WEIXIN webpack --mode production"
}
```


---


## **🛠 实现原理**
详细规则和渲染逻辑可见源代码。

---


## **🌟 结论**
这个 Webpack Loader ，在 Vue2 + Webpack 项目里使用 `#ifcomp` 条件编译 使用不同的组件，自动删除无关代码，使打包后的文件更小、更简洁。

🚀 **让你的 Vue2 项目支持多平台代码分支，轻松适配不同端！**