webpack - imports-loader和ProvidePlugin：相似但不一樣？

以下是我有：webpack - imports-loader和ProvidePlugin：相似但不一樣？

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實例？

來源

2017-05-08 Glenn Mohammad

imports-loader只在運行父裝載器時才引入導入。（在你的情況下，只在js文件上。）導入的文件被「附加」到父級。

ProviderPlugin導入到「全局」名稱空間中，使得您在任何地方導入的任何內容都可用。它通常用於像jquery這樣的獨立庫。

相似，但不相同。

來源

2017-05-08 17:14:32 Quotidian

webpack - imports-loader和ProvidePlugin：相似但不一樣？

回答

相關問題