Nocode Compiler Webpack Loader

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

安装

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

使用方法

$3

使用辅助函数可以自动将 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, // 可选，是否启用日志
});
`

$3

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

$3

如果您不想使用辅助函数，也可以直接在 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',
},
],
},
};
`

$3

`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, // 可选，是否启用日志
},
},
},
],
},
};
`

常见问题

$3

如果在 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)