閑來無事先寫一篇博客，整合一下最近網(wǎng)上更新的資源松逊，在用webpack構(gòu)建VUE項(xiàng)目時(shí)會(huì)遇到仍舊想用jquery以及依賴jQuery的插件，但是引入jq會(huì)很麻煩，這里介紹一種比較簡單使用的方法殿漠，使用expose-loader
先簡單介紹一下引入jq的兩種別的做法，第一種是用Npm下載jquery依賴佩捞，然后在webpack.config.js也就是配置文件中聲明$為全局變量绞幌，然后import或者require進(jìn)去（具體做法自行百度，這種做法很常見也很多一忱，這里就不詳細(xì)介紹了）莲蜘，但是這種做法對于插件引入還是不太友好的，第二種做法是直接在index.html中使用script以一個(gè)絕對路徑引入jquery.min.js帘营，這種做法我沒試過票渠，不知道要不要聲明全局變量。
下面就開始使用expose-loader來引入jq及其插件
首先
npm install jquery expose-loader --save
我們先下載jq和expose-loader
然后我們?nèi)ヅ渲脀ebpack.config.js（注意：這個(gè)文件是通過vue-cli后以webpack-simple所生成的芬迄，如果單純使用webpack模板的話问顷，那就要去找一個(gè)叫webpack.conf的文件了，那個(gè)才是配置這個(gè)的文件禀梳，忘記具體叫啥了= =）
module: {
loaders: [
{
test: require.resolve('jquery'),
loader: 'expose-loader?jQuery!expose-loader?$'
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
把關(guān)于jquery和expose-loader的配置放在所有的Loader之前杜窄，也就是第一個(gè)加載。
最后算途，去想引入插件的頁面加入如下代碼
import $ from 'expose-loader?$!jquery'
import 'jquery.easing' //插件可用
在vue組件中的script的最上方羞芍，也就是export default上面，加入這兩行代碼郊艘，注意這里用的是es6的語法，沒有bable的童鞋請用require引入唯咬，不過用vue-cli生成的項(xiàng)目應(yīng)該支持es6了吧= =
當(dāng)然題主這里以jquery.easing為例纱注，如果是在npm中找不到的依賴，是一個(gè)相對冷門的插件胆胰，請用絕對路徑引入
最后說一句狞贱，expose-loader的寫法已經(jīng)有了更新，之前的寫法是
{
test: require.resolve('jquery'),
loader: 'expose?jQuery!expose?$'
},
import $ from 'expose?$!jquery'
import 'jquery.easing' //插件可用
在用了最新版的webpack2.0和expose-loader之后蜀涨，記得在原有代碼上加上-loader瞎嬉，不然會(huì)失效
