uni-app 在 vue.config.js 中使用 require('webpack') 试图加载插件自定义的时候，无法编译

发布于 1周前 作者 htzhanglong 来自 Uni-App

const webpack = require('webpack');

会导致无法编译。

[HBuilder] 19:20:57.507 ERROR Error loading vue.config.js:
[HBuilder] 19:20:57.507 ERROR Error: Cannot find module ‘webpack’
[HBuilder] 19:20:57.507 Require stack:
[HBuilder] 19:20:57.507 - ======\vue.config.js
[HBuilder] 19:20:57.507 - ======\HBuilderX\plugins\uniapp-cli\node_modules@vue\cli-service\lib\Service.js
[HBuilder] 19:20:57.507 - ======\HBuilderX\plugins\uniapp-cli\bin\uniapp-cli.js
[HBuilder] 19:20:57.507 Error: Cannot find module ‘webpack’
[HBuilder] 19:20:57.507 Require stack:
[HBuilder] 19:20:57.508 - ======\vue.config.js
[HBuilder] 19:20:57.508 - ======\HBuilderX\plugins\uniapp-cli\node_modules@vue\cli-service\lib\Service.js
[HBuilder] 19:20:57.508 - ======\HBuilderX\plugins\uniapp-cli\bin\uniapp-cli.js
[HBuilder] 19:20:57.508 at Module._resolveFilename (node:internal/modules/cjs/loader:1140:15)
[HBuilder] 19:20:57.508 at Module._resolveFilename (======\HBuilderX\plugins\uniapp-cli\node_modules\module-alias\index.js:49:29)
[HBuilder] 19:20:57.508 at Module._load (node:internal/modules/cjs/loader:981:27)
[HBuilder] 19:20:57.508 at Module.require (node:internal/modules/cjs/loader:1231:19)
[HBuilder] 19:20:57.508 at require (node:internal/modules/helpers:177:18)
[HBuilder] 19:20:57.508 at Object.<anonymous> (======\vue.config.js:1:17)

难道webpack还要手动npm安装吗？在目录 ======\HBuilderX\plugins\uniapp-cli\node_modules\ 有 webpack 这个包，不明白为什么无法找到，感谢指点


Harmonyos Next教程
3 回复

const { resolve } = require(‘path’)
const rootModulePath = resolve(process.cwd(), ‘node_modules’)
function resolveModulePath(dir) {
return resolve(rootModulePath, dir)
}
const webpack = require(resolveModulePath(‘webpack’))


正确做法，感谢

在 uni-app 中，vue.config.js 文件主要用于配置 Vue CLI 项目，但 uni-app 实际上是基于 Vue.js 的一个多端框架，它有自己的构建和打包机制，不完全依赖于 Vue CLI 的 webpack 配置。因此，直接在 vue.config.js 中使用 require('webpack') 来加载自定义插件可能会遇到兼容性问题，导致无法编译。

不过，uni-app 提供了多种方式来自定义构建流程，包括通过 vue.config.js 的 configureWebpack 或 chainWebpack 选项（如果它们被支持），以及使用 uni-app 自带的插件和脚本扩展机制。

由于直接在 vue.config.js 中使用 require('webpack') 可能会遇到问题，以下是一个使用 uni-app 插件机制来自定义 webpack 配置的替代方案。请注意，uni-app 的官方文档可能会随时间更新，因此建议查阅最新的文档以获取最准确的信息。

步骤 1：创建自定义 webpack 插件

首先，你需要创建一个自定义的 webpack 插件。例如，创建一个名为 MyWebpackPlugin.js 的文件：

// MyWebpackPlugin.js
class MyWebpackPlugin {
  apply(compiler) {
    compiler.hooks.done.tap('MyWebpackPlugin', (stats) => {
      console.log('Webpack build is done!');
    });
  }
}

module.exports = MyWebpackPlugin;

步骤 2：在 uni-app 项目中引入并使用该插件

由于 uni-app 不直接支持在 vue.config.js 中修改 webpack 配置，你可以通过修改 build.js 或 webpack.config.js（如果存在）来引入你的插件，或者通过自定义脚本在构建过程中应用插件。不过，这种方法可能需要对 uni-app 的构建流程有较深入的了解。

一个更简单且推荐的方法是使用 uni-app 的 extraScripts 配置（如果可用），在构建的不同阶段执行自定义脚本。不过，请注意，extraScripts 并不直接支持 webpack 插件的加载。

由于直接集成 webpack 插件到 uni-app 的构建流程中可能比较复杂且容易出错，通常建议寻找其他方式来实现相同的功能，比如使用 uni-app 提供的 API 和插件机制。

总之，如果你确实需要在 uni-app 中使用自定义的 webpack 插件，可能需要更深入地了解 uni-app 的构建和打包机制，并考虑通过修改或扩展其构建脚本来实现。但请注意，这样做可能会增加项目的复杂性和维护成本。

回到顶部