在webpack+vue项目开发中引入第三方插件
并不是所有的js文件都可以直接在webpack中使用。这些文件可能不支持模块（module）格式，甚至完全没有使
用模块（module）。
webpack提供了几种loaders(装载机)来解决这些文件如何在webpack中使用。 这个示例使用require来保证他们（
的代码量）短小。通常你需要在你的webpack的config文件中配置这些loaders(装载机)。详情见Using loaders
（使用加载器）。
1.IMPORTING（进口）
如果一个文件不通过require()依赖进口，您将需要使用一个loader(装载机)。
imports-loader(
导入加载器)
允许您使用依赖于特定全局变量的module(模块), 这对于依赖于全局变量的第三方模块非常有用，比如$或者这是
window object(窗口对象)。imports-loader(进口装载机)可以添加必要的require（\'whatever”）calls(调用)
，因此模块在webpack上工作。
例子：
预计中的一个全局变量$和你有一个应使用jQuery的模块。
require("imports-loader?$=jquery!./file.js")
预计配置一个全局变量xconfig和你希望是{value: 123 }形式。
require("imports-loader?xConfig=>{value:123}!./file.js")
认为这是全局范围。
require("imports-loader?this=>window!./file.js") or require("imports-loader?
this=>global!./file.js")
插件provideplugin
这个插件使模块（module）在每个模块(module)中作为变量可用。这个模块 只是你需要使用的变量。
示例：
在每个模块中提供$和jQuery，无需编写 require（“jquery”）。
new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery"
})
2.EXPORTING(出口) 该文件不导出其值。
exports-loader(出口装载机)
该loader(装载机)从文件里面导出变量。
示例：
该文件设置了一个全局范围变量var XModule = ...
var XModule = require（“exports-loader？XModule！./file.js")
该文件设置了多个全局范围变量：var XParser,Minimizer.
var XModule = require（“exports-loader？Parser=XParser&Minimizer!./file.js”）
XModule.Parser;XModule.Minimizer;(注释Parser:解析器)
文件设置一个全局变量XModule =...
require("imports-loader?XModule=>undefined!exports-loader?XModule!./file.js") (import to not leak
to the global context:导入不泄漏到全局上下文)
文件设置窗口属性window.XModule =... require("imports-loader?window=>{}!exports-loader?window.XModule!./file.js")
3.FIXING BROKEN MODULE STYLES(修复损坏的模块样式)
有些文件使用模块样式错误。你可能想解决这个通过webpack不使用这 风格的教学。
Disable some module styles（禁用某些模块样式 ）：
示例：
破碎的AMD
require("imports-loader?define=>false!./file.js")
破碎的CommonJS
require("imports-loader?require=>false!./file.js")
配置选项module.noParse
这不由webpack解析。因此不能使用依赖项。这可能对 好的图书馆。
例子:
{ module: { noParse: [ /XModule[\\\/]file\.js$/, path.join(__dirname, "web_modules", "XModule2") ] } } 注意：exports和module仍然可用并且能用。你可能想使用imports-loader未定义这些exports和module
script-loader(脚本装载机)
这个加载器在全局上下文中计算代码，就像在脚本标签中添加代码一样。在这种模式下，每一个正常的库都应该
可以工作。require、module等未定义。
注：该文件内容作为字符串添加到bundle（批）。在webpack中它不是（体积）最小的，因此要使用（体积） 最
小的版本。也没有开发工具支持通过这个loader来添加库。
EXPOSING（曝光）
有些情况下，您希望模块将自己导出到全局上下文中。
不要这样做，除非你真的需要这个。（最好用provideplugin）
expose-loader（曝光加载器） 这个加载器（loader）暴露了出口模块全局环境。
例子:
揭露XModule的全球语境中 require("expose-loader?XModule!./file.js") 另一个例子：
require(\'expose-loader?$!expose?jQuery!jquery\');
...
$(document).ready(function() { console.log("hey"); })
通过将jQuery作为包含jQuery代码或根文件的文件中的全局名称空间提供，您可以在项目中处处使用jQuery。这
是很好的如果你计划在你的webpack项目中执行Bootstrap(启动项目)。
注意：使用太多的全局名称间隔会使应用程序效率降低。如果您打算使用许多全局名称空间，那么考虑在您的项
目中实现类似Babel runtime(运行时)之类的东西。
ORDER OF LOADERS(加载器顺序) 以装载机 在极少数情况下，当您需要应用多个技术时，需要使用正确的加载顺序： 内联：expose-loader!
imports-loader!export-loaders，配置优先级：expose > imports > exports。
// 上面的内容都是在网上其他人那里看到的
有些真的是天下文章一大抄，都是文章的搬运工。具体实践到底行不行的同，就没有一个合理的答复。下面来说一说，我自己在项目中使用到的。
1.在index.html中引用，就像平常开发静态文件一样：
<script type="text/javascript" src="./src/assets/js/jquery.js"></script>
2.通过npm安装方式：npm install jquery --save-dev
在后缀名为.vue的文件中引用，就比较简单了。
<script>
import $ from \'jquery\'
export default { ... }
</script>
3.利用{}直接引用：
<script>
import {PhotoSwipe} from \'../assets/js/photoswipe.min.js\'
export default {
mounted () {
let ps = new PhotoSwipe();
}
}
</script>