Nocode Compiler Webpack Loader

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

安装

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

使用方法

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

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

// 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

// 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 是一个对象而不是函数，可以这样使用：

// 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 函数：

// 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：

// 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 引用方式

// 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 对象，而不返回它：

// 错误写法
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)