Webpack 和导入加载程序错误“无法解析”

Posted 2023-03-07

【中文标题】Webpack 和导入加载程序错误“无法解析”

【英文标题】：Webpack and imports-loader error "Can't resolve"

【发布时间】：2018-03-23 13:07:33

【问题描述】：

我正在尝试使用 Webpack (v3.6.0) 为我的 Web 应用程序捆绑大量 js 文件，其中一些是 Angular 组件，但大多是遗留代码。

遗留代码与某些特定功能高度相互依赖。例如，我们有一个特定的文件，它声明了 3 个函数（PrepareTranslation、PrepareLocalTranslation 和 Translate），它们在整个系统中使用。

我一直在寻找一种使这 3 个函数全局化的方法，但相反，我找到了一篇关于“imports-loader”的文章，它允许我使用特定符号将变量注入该代码：

require("imports-loader?$=jquery!./myjs");

上面的代码会在 myjs.js 中生成

var $ = require('jquery');

但是，当我尝试使用此方法将需求和变量注入到我的类中时，Webpack 会抛出错误“无法解析 imports-loader?$=jquery!./myjs”。 删除！ from the string 修复了错误，但我不太喜欢这样的 sintax，它与我目前在网上找到的所有内容都不同。

我的 webpack 入口点脚本如下：

window._SYS_VER = '452';

import 'jquery';

import 'ThirdParty/angular/angular';

import Emitter from 'ThirdParty/emitter';

//SimpleMVC related
import 'imports-loader?jQuery=jquery./js/simplemvc/simplemvc.modaldialog';
import 'imports-loader?jQuery=jquery./js/simplemvc/simplemvc.paneldialog';
//     import 'imports-loader?jQuery=jquery!./js/simplemvc/simplemvc.paneldialog';
import Translation from 'JS/simplemvc/simplemvc.i18n';

// jQuery related
import 'JS/jquery/ui/jquery-ui.min';
import 'JS/jquery/masked/jquery.maskedinput';
import 'JS/jquery/growl/jquery.growl';
import 'imports-loader?prepareTranslation=>Translation.prepareTranslation./js/jquery/alerts/jquery.alerts';

我尝试过使用 require 语法而不是 import，但它的工作方式相同。

我能够使用 webpack.ProvidePlugin 在每个 js 上使用 jquery，但它不适用于我的 i18n 函数，然后我开始尝试使用 imports-loader

有什么想法吗？

【参考方案1】：

webpack 将imports-loaders 分开，所以需要通过以下方式安装：

yarn add imports-loader