npm package: @meituan-nocode/webpack-plugin-nocode-compiler
Description: nocode compiler webpack plugin for Vue and React projects
Latest version: 0.2.7

# Nocode Compiler Webpack Loader

这是一个用于处理代码转换的 webpack loader，支持处理 Vue、JSX、TSX 等文件类型。

## 安装

```bash
npm install @meituan-nocode/webpack-plugin-nocode-compiler --save-dev
```

## 使用方法

### 方式一：使用辅助函数（推荐）

使用辅助函数可以自动将 loader 添加到 webpack 配置中，无需手动配置 loader 规则。

```js
// webpack.config.js
const { componentCompiler } = require('@meituan-nocode/webpack-plugin-nocode-compiler');

// 获取 webpack 配置
const webpackConfig = {
    // ... 你的 webpack 配置
};

// 添加 Nocode Compiler Loader
module.exports = componentCompiler(webpackConfig, {
    enableLogging: true, // 可选，是否启用日志
});
```

### 方式二：在 Vue CLI 项目中使用（重要）

在 Vue CLI 项目的 `vue.config.js` 文件中使用时，有三种配置方式，现在都可以使用统一的 `componentCompiler` 函数：

#### 2.1 函数形式的 configureWebpack

```js
// vue.config.js
const { componentCompiler } = require('@meituan-nocode/webpack-plugin-nocode-compiler');

module.exports = {
    configureWebpack: config => {
        // 直接修改 config 对象，不要返回修改后的配置
        componentCompiler(config, {
            enableLogging: true,
        });
    },
};
```

#### 2.2 对象形式的 configureWebpack

如果你的 `configureWebpack` 是一个对象而不是函数，可以这样使用：

```js
// vue.config.js
const { componentCompiler } = require('@meituan-nocode/webpack-plugin-nocode-compiler');
const path = require('path');

// 创建一个基础配置
const baseConfig = {
    // ... 你的配置
};

// 应用 componentCompiler
const configWithLoader = componentCompiler(baseConfig, {
    enableLogging: true,
});

module.exports = {
    // 将处理后的配置作为 configureWebpack 的值
    configureWebpack: configWithLoader,
};
```

#### 2.3 使用 chainWebpack（推荐）

现在你可以在 `chainWebpack` 中使用相同的 `componentCompiler` 函数：

```js
// vue.config.js
const { componentCompiler } = require('@meituan-nocode/webpack-plugin-nocode-compiler');

module.exports = {
    configureWebpack: {
        resolve: {
            fallback: {
                querystring: require.resolve('querystring-es3'),
            },
        },
    },
    chainWebpack: config => {
        // 使用相同的 componentCompiler 函数
        componentCompiler(config, { enableLogging: true });

        // 你可以继续添加其他链式配置...
    },
};
```

> **注意**：在 Vue CLI 项目中，使用 `configureWebpack` 时，如果返回了修改后的配置对象，可能会导致 entry 重复的问题。正确的做法是直接修改传入的 config 对象，而不返回它。

### 方式三：最简单的 loader 引用方式

如果您不想使用辅助函数，也可以直接在 webpack 配置中添加 loader：

```js
// webpack.config.js
const path = require('path');

module.exports = {
    // ...其他配置
    module: {
        rules: [
            {
                test: /\.(vue|jsx?|tsx?|m[jt]s)$/,
                include: [path.resolve(process.cwd(), 'src')],
                exclude: /node_modules/,
                use: '@meituan-nocode/webpack-plugin-nocode-compiler',
            },
        ],
    },
};
```

### 方式四：带选项的 loader 引用方式

```js
// webpack.config.js
const path = require('path');

module.exports = {
    // ...其他配置
    module: {
        rules: [
            {
                test: /\.(vue|jsx?|tsx?|m[jt]s)$/,
                include: [path.resolve(process.cwd(), 'src')],
                exclude: /node_modules/,
                use: {
                    loader: '@meituan-nocode/webpack-plugin-nocode-compiler',
                    options: {
                        enableLogging: true, // 可选，是否启用日志
                    },
                },
            },
        ],
    },
};
```

## 常见问题

### 在 Vue CLI 项目中遇到的 entry 重复问题

如果在 Vue CLI 项目中使用 `configureWebpack` 并返回配置对象，可能会遇到以下错误：

```
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.entry['app'] should not contain the item './src/main.js' twice
```

这是因为 Vue CLI 会将返回的配置与内部配置合并，导致 entry 路径被重复添加。解决方法是直接修改传入的 config 对象，而不返回它：

```js
// 错误写法
configureWebpack: config => {
    const configAfter = componentCompiler(config, { enableLogging: true });
    return configAfter; // 这会导致 entry 重复
};

// 正确写法
configureWebpack: config => {
    componentCompiler(config, { enableLogging: true });
    // 不返回 config
};
```

## 配置选项

| 选项          | 类型    | 默认值 | 描述                                                   |
| ------------- | ------- | ------ | ------------------------------------------------------ |
| enableLogging | boolean | false  | 是否启用日志输出，开启后会输出详细的处理过程和调试信息 |

## 支持的文件类型

- Vue 单文件组件 (.vue)
- JavaScript (.js, .mjs)
- TypeScript (.ts, .mts)
- JSX (.jsx)
- TSX (.tsx)
- HTML 模板 (带有 vue 查询参数的 .html)