Webpack 构建时遇到 Critical dependency: the request of a dependency is an expression 错误解决方案-JavaScript中文网-JavaScript教程资源分享门户

在使用 Webpack 进行前端项目构建时，有时会遇到一个错误：Critical dependency: the request of a dependency is an expression。这个错误通常是由于在代码中使用了动态导入（dynamic import）或 require.ensure 等动态加载模块的语法，而 Webpack 在构建时无法确定导入的模块路径，导致出现了这个错误。

这个错误的解决方案其实很简单，我们只需要在 Webpack 配置文件中添加一个插件即可。下面是具体的操作步骤：

1. 安装插件

首先，我们需要安装一个名为 webpack-fix-style-only-entries 的插件。这个插件可以解决 Webpack 在构建时遇到动态导入语法时出现的错误。

使用 npm 安装：

npm install webpack-fix-style-only-entries --save-dev

使用 yarn 安装：

yarn add webpack-fix-style-only-entries --dev

2. 配置插件

在 Webpack 配置文件中添加如下代码：

const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');

module.exports = {
  // ...其他配置
  plugins: [
    new FixStyleOnlyEntriesPlugin(),
  ],
};

3. 示例代码

假设我们有一个使用动态导入语法的代码文件，如下所示：

import('./module.js').then(module => {
  console.log(module);
});

在没有添加插件之前，Webpack 构建时会出现如下错误：

Critical dependency: the request of a dependency is an expression

但是，添加了插件之后，Webpack 就可以正常构建了。

4. 总结

Webpack 是前端开发中非常重要的一个工具，但是在使用过程中会遇到各种各样的问题。本文介绍了在使用 Webpack 进行前端项目构建时遇到 Critical dependency: the request of a dependency is an expression 错误的解决方案。通过添加一个名为 webpack-fix-style-only-entries 的插件，我们可以轻松解决这个错误，让我们的项目可以正常构建。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/650d34c195b1f8cacd6eb35c