並不是所有的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>