javascript – 混淆各种webpack匀场方法

我对webpack允许暴露npm上不可用的变量或放入捆绑包中的变量的各种方式有点困惑.我能够通过使用公开谷歌可视化图表脚本的全球谷歌变量

resolve: {
    extensions: ['.js', '.json'],
    alias: {
      'google': path.resolve(__dirname, 'vendor', 'google.js')
    }
  }

结合

  plugins: [
    new webpack.ProvidePlugin({
      'google': 'google'
    })
  ]

然而,在the webpack docs处还有其他一些垫片的方法,看起来他们可能会做类似的事情.有import-loader和exports-loader,以及脚本加载器.我知道我已经链接到了文档,但是我仍然会找到他们对这四个应该用什么时候有点不清楚的描述.

另外看这个例子,这是否需要不分配给变量？它意味着去哪儿了？有关此语法的内容的文档在哪里？

require("imports?$=jquery!./file.js")

有人可以提供一些关于何时应该使用这些内容的例子？

解决方法:

进出口装载机很容易理解.如果您使用其中一个或两者,您的模块将被包装到具有导出和导入的另一个函数中.

例如,我正在使用像全局< script src =“”>那样使用的paho-mqtt模块.在页面上：

import Paho from 'imports-loader?this=>window!exports-loader?Paho!paho-mqtt';

//and this is transformed by webpack to something like:
(function(window){

    //wow you can use `window here`, `this` in the global context === window.


   // original module code here
   // that exposes global var `Paho`


   module.exports = Paho;

})(this);

标签：javascript,node-js,webpack,webpack-2,asset-management
来源： https://codeday.me/bug/20190608/1196838.html