个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
这是我的:
a.js
$(() => {
$.x = 42;
console.log('hello from a');
});
b.js
$(() => {
console.log($.x);
console.log('hello from b');
});
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="/vendor.js"></script>
<script src="/a.js"></script>
<script src="/b.js"></script>
我的问题是，下面的两个 webpack 配置是否实现了完全相同的结果？
[1] webpack.config.js(带导入加载器)
const config = {
entry: {
a: './a.js',
b: './b.js',
vendor: [
'jquery',
],
},
module: {
rules: [
{
test: /(a|b)\.js$/,
use: 'imports-loader?$=jquery',
},
],
},
};
[2] webpack.config.js(带 ProvidePlugin)
const config = {
entry: {
a: './a.js',
b: './b.js',
vendor: [
'jquery',
],
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
}),
],
};
如果它们相似但不相同，那么什么时候使用一个而不是另一个？
另外，在b.js中，$.x等于undefined，这是否意味着$引用不同的 jQuery 对象？如果是这样，我如何让它们引用相同的(全局)jQuery 实例？
最佳答案
imports-loader 仅在父加载器运行时引入导入。 (在您的情况下，仅在 js 文件上。)导入的文件“附加”到父文件。
ProviderPlugin 导入到“全局”命名空间，使您导入的任何内容都可以在任何地方使用。它通常用于像 jquery 这样的独立库。
相似，但不相同。
关于javascript - webpack - imports-loader 和 ProvidePlugin : similar but not the same?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43853418/
24
4
0
我正在尝试使用有 Angular NG6起动器。在其源代码中，import angular from angular几乎写入了每个js文件。所以我尝试这样: new webpack.ProvideP
我想将 jquery 全局包含到我的 React 应用程序中。我正在使用很多使用 jquery 的第三方插件。所以我尝试通过 webpack 的 ProvidePlugin 来实现 new webpa
我有一个在很多模块中使用 zepto 的项目。 如您所知，webpack.ProvidePlugin 是处理这种情况的最佳方式，有了它，我不需要在每个模块中手动导入 zepto。 zepto 不会自己
我正在尝试在我的应用程序中访问 jquery 根据 webpack 网站上的信息，您可以使用 webpack 创建全局变量 https://webpack.js.org/plugins/provide
我正在探索使用 Webpack 的想法与 Backbone.js . 我已经遵循了快速入门指南，并且对 Webpack 的工作原理有了大致了解，但我不清楚如何加载 jquery/backbone/un
我正在尝试将 jquery 与 webpack 一起使用，但即使我使用 Webpack Provider 插件，例如: new webpack.ProvidePlugin({ 'window.
我是 Webpack 的新手，但无法弄清楚为什么我的 ProvidePlugin 调用没有按预期工作。 我有以下文件: 应用程序.js var App = function() { getSo
我有一个正在开发的小型试用 Web 应用程序，它使用 vue webpack 模板 ( https://github.com/vuejs-templates/webpack )。我是 webpack
我想使用 Webpack 的 ProvidePlugin用函数替换自由变量。在 worker 中，我想用不同的实现替换它。 webpack 的 worker-loader 都没有也不是 GoogleC
我目前正在尝试使用 webpack.ProvidePlugin，但似乎没有正确加载它。这是我的 environment.js var webpack = require("webpack"); con
我有以下内容... webpack.config.js new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', ... }),
这是我的: a.js $(() => { $.x = 42; console.log('hello from a'); }); b.js $(() => { console.log($.x
我有一个进行网络调用的功能，我希望该功能在全局范围内可用，而无需在每次需要使用该功能时都导入它 请求.js import 'whatwg-fetch'; /** * Parses the JSON
// the key same to the value, it is not worked! return an empty object {}. new webpack.ProvidePlugin
我有一个 Angular 应用程序，目前通过 Webpack 构建成一个大包，在一个文件中包含所有依赖项和应用程序代码。我试图将代码分成两个包，一个包含我的所有依赖项，另一个包含我的所有应用程序代码。
我正在使用 webpack，并按照示例分别基于 whatwg-fetch 和 es6-promise 包为旧版浏览器填充 fetch 和 Promise。 new webpack.ProvidePlu
我目前正在为我创建的每个 javascript 文件导入 jQuery 数据表。 import 'datatables.net/js/jquery.dataTables'; import 'datat
我试图在我的 webpack 应用程序的入口 index.js 文件中使用 jQuery 作为 $，但在浏览器中运行我的应用程序时收到此错误: Uncaught TypeError: Cannot r
* 注意:我对 Webpack 几乎一无所知。 我想加载 react节点模块和 Webpack 中的其他模块通过 ProvidePlugin可以在全局范围内访问它们。 我创建了一个 create-re
1。 ProvidePlugin() 看起来是一种常用的方法。有一个gist关于它，展示了如何将 whatwg-fetch polyfill 包含到 Webpack 构建中。 StackOverflo
我是一名优秀的程序员,十分优秀！