11:41 提问
请问谁能告诉我webpack＋vue组建开发怎么引入第三方插件
请问谁能告诉我webpack＋vue组建开发怎么引入第三方插件，需要引入的插件是mCustomScrollbar，弄了很久没有成功，请大神助攻，谢谢
按赞数排序
要在配置文件中配置
例如引入了一个jq
new webpack.ProvidePlugin({$:"jquery",jQuery:"jquery","window.jQuery":"jquery"})
当然 首先得先npm install jq插件
要什么版本可以先在package.json里面配置好"jquery": "^2.2.4" 然后npm install安装
其他相关推荐Webpack引入jquery及其插件的几种方法 - 知乎专栏
{"debug":false,"apiRoot":"","paySDK":"/api/js","wechatConfigAPI":"/api/wechat/jssdkconfig","name":"production","instance":"column","tokens":{"X-XSRF-TOKEN":null,"X-UDID":null,"Authorization":"oauth c3cef7c66aa9e6a1e3160e20"}}
{"database":{"Post":{"":{"contributes":[],"title":"Webpack引入jquery及其插件的几种方法","author":"web-qian-duan-da-shu","content":"1. 直接引入[难以引入插件]// 可以直接引入jquery,但没有全局的jQuery变量\nimport $ from 'jquery'\n// 如果此时直接引入jquery 插件，则失败,如\nimport 'jquery-ui' // 错误，将会找不到jquery-ui注册的相关方法\n2. ProvidePlugin[难以引入插件]在webpack中添加插件ProvidePlugin\nplugins: [\n
new webpack.ProvidePlugin({\n
$: \"jquery\",\n
jQuery: \"jquery\"\n
$函数会自动添加到当前模块的上下文，无需显示声明\n问题是依旧没有全局的$函数，所以导入插件依旧会失败，并且如果有eslint这样的preLoads，调用语句也难以通过语法校验(因为没有声明$就直接使用)，仅这一点，对于我这样的代码处女座就难以接受。\n3. expose-loader[推荐使用]不需要任何其他的插件配合，只要将下面的代码添加到所有的loader之前\n {\n
test: require.resolve('jquery'),\n
loader: 'expose?jQuery!expose?$'\n }\n引用时改为如下方式\nimport $ from 'expose?$!jquery'\nimport 'jquery-ui' //插件可用
\n imports-loader、script-loader同样可达到此效果，配置与功能都非常相似，在此不一一说明。\n4. 包装jquery[推荐使用]此方法只依赖于自己，完全不需要任何其他插件与加载器，创建jquery的包装对象jquery-vendor.js\nimport $ from 'jquery'\nwindow.$ = $\nwindow.jQuery = $\nexport default $\n以后引用jquery时指向jquery-vendor.js\nimport $ from '../assets/jquery-vendor.js'\nimport 'jquery-ui'\n//
此时UI的方法全部可用，如果需要引用bootstrap，可参照此方法\n为了调用方便，可在webpack配置文件中创建jquery-vendor.js的别名\nalias: {\n
: 'src/assets/jquery-vendor.js' //
将其指向jquery-vendor.js所在位置\n}
\n来源：","updated":"T09:05:11.000Z","canComment":false,"commentPermission":"anyone","commentCount":2,"collapsedCount":0,"likeCount":2,"state":"published","isLiked":false,"slug":"","isTitleImageFullScreen":false,"rating":"none","titleImage":"","links":{"comments":"/api/posts//comments"},"reviewers":[],"topics":[{"url":"/topic/","id":"","name":"webpack"}],"adminClosedComment":false,"titleImageSize":{"width":0,"height":0},"href":"/api/posts/","excerptTitle":"","tipjarState":"closed","annotationAction":[],"sourceUrl":"","pageCommentsCount":2,"hasPublishingDraft":false,"snapshotUrl":"","publishedTime":"T17:05:11+08:00","url":"/p/","lastestLikers":[{"bio":"web工程师","isFollowing":false,"hash":"b485c629bb24","uid":050000,"isOrg":false,"slug":"ykf-69","isFollowed":false,"description":"","name":"ykf","profileUrl":"/people/ykf-69","avatar":{"id":"da8e974dc","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false},{"bio":"前端小白","isFollowing":false,"hash":"be6c1b21ed5a99a88868d4","uid":758500,"isOrg":false,"slug":"zhou-yi-99-38","isFollowed":false,"description":"怎么可以放弃","name":"101架钢琴","profileUrl":"/people/zhou-yi-99-38","avatar":{"id":"a3b30b4bba6dcbcde1416e","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false}],"summary":"1. 直接引入[难以引入插件]// 可以直接引入jquery,但没有全局的jQuery变量\nimport $ from 'jquery'\n// 如果此时直接引入jquery 插件，则失败,如\nimport 'jquery-ui' // 错误，将会找不到jquery-ui注册的相关方法2. ProvidePlugin[难以引入插件]在webpack中…","reviewingCommentsCount":0,"meta":{"previous":null,"next":null},"annotationDetail":null,"commentsCount":2,"likesCount":2,"FULLINFO":true}},"User":{"web-qian-duan-da-shu":{"isFollowed":false,"name":"wqb2017","headline":"熟练使用js、HTML、CSS；使用过jQueryjs、Vuejs、bootstrap、gulp、webpack、echarsjs封装过Ajax、js库、UI框架；有非常丰富的web运营后台建站和维护经验；做过h5、微信公众号；最近在研究前端模块化、工程化；目前在学习react、nodejs、Java等；","avatarUrl":"/v2-1584f5adac5ee3c9c212cff758dc62f2_s.jpg","isFollowing":false,"type":"people","slug":"web-qian-duan-da-shu","bio":"前端选修课","hash":"8f86b34f4ab7a92ced7e","uid":703100,"isOrg":false,"description":"熟练使用js、HTML、CSS；使用过jQueryjs、Vuejs、bootstrap、gulp、webpack、echarsjs封装过Ajax、js库、UI框架；有非常丰富的web运营后台建站和维护经验；做过h5、微信公众号；最近在研究前端模块化、工程化；目前在学习react、nodejs、Java等；","profileUrl":"/people/web-qian-duan-da-shu","avatar":{"id":"v2-1584f5adac5ee3c9c212cff758dc62f2","template":"/{id}_{size}.jpg"},"isOrgWhiteList":false,"badge":{"identity":null,"bestAnswerer":null}}},"Comment":{},"favlists":{}},"me":{},"global":{"experimentFeatures":{"ge3":"ge3_9","ge2":"ge2_1","nwebStickySidebar":"sticky","newMore":"new","liveReviewBuyBar":"live_review_buy_bar_2","liveStore":"ls_a2_b2_c1_f2","isOffice":"false","homeUi2":"default","answerRelatedReadings":"qa_recommend_with_ads_and_article","remixOneKeyPlayButton":"headerButton","qrcodeLogin":"qrcode","newBuyBar":"livenewbuy3","newMobileColumnAppheader":"new_header","zcmLighting":"zcm","favAct":"default","appStoreRateDialog":"close","mobileQaPageProxyHeifetz":"m_qa_page_nweb","iOSNewestVersion":"4.2.0","default":"None","wechatShareModal":"wechat_share_modal_show","qaStickySidebar":"sticky_sidebar","androidProfilePanel":"panel_b"}},"columns":{"next":{}},"columnPosts":{},"columnSettings":{"colomnAuthor":[],"uploadAvatarDetails":"","contributeRequests":[],"contributeRequestsTotalCount":0,"inviteAuthor":""},"postComments":{},"postReviewComments":{"comments":[],"newComments":[],"hasMore":true},"favlistsByUser":{},"favlistRelations":{},"promotions":{},"switches":{"couldAddVideo":false},"draft":{"titleImage":"","titleImageSize":{},"isTitleImageFullScreen":false,"canTitleImageFullScreen":false,"title":"","titleImageUploading":false,"error":"","content":"","draftLoading":false,"globalLoading":false,"pendingVideo":{"resource":null,"error":null}},"drafts":{"draftsList":[],"next":{}},"config":{"userNotBindPhoneTipString":{}},"recommendPosts":{"articleRecommendations":[],"columnRecommendations":[]},"env":{"edition":{},"isAppView":false,"appViewConfig":{"content_padding_top":128,"content_padding_bottom":56,"content_padding_left":16,"content_padding_right":16,"title_font_size":22,"body_font_size":16,"is_dark_theme":false,"can_auto_load_image":true,"app_info":"OS=iOS"},"isApp":false},"sys":{},"message":{"newCount":0},"pushNotification":{"newCount":0}}插件可以完成更多 loader 不能完成的功能。
插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。
接下来，我们利用一个最简单的 BannerPlugin 内置插件来实践插件的配置和运行，这个插件的作用是给输出的文件头部添加注释信息。
修改 webpack.config.js，添加 plugins：
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
path: __dirname,
filename: 'bundle.js'
loaders: [
{test: /\.css$/, loader: 'style!css'}
plugins: [
new webpack.BannerPlugin('This file is created by zhaoda')
然后运行 webpack，打开 bundle.js，可以看到文件头部出现了我们指定的注释信息：
/*! This file is created by zhaoda */
/******/ (function(modules) { // webpackBootstrap
// The module cache
var installedModules = {};
// 后面代码省略并不是所有的js文件都可以直接在webpack中使用。这些文件可能不支持模块（module）格式，甚至完全没有使
用模块（module）。
webpack提供了几种loaders(装载机)来解决这些文件如何在webpack中使用。 这个示例使用require来保证他们（
的代码量）短小。通常你需要在你的webpack的config文件中配置这些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.PXModule.M(注释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（禁用某些模块样式 ）：
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。
阅读(...) 评论()webpack如何配置 插入jquery+jquery插件?
极客标签 | 在线编程知识分享学习平台
发布于，阅读863次，收藏 0次，评论条 - 来自
webpack如何配置 插入jquery+jquery插件?
如果想引用第三方插件，不通过npm的方式，怎样加载？比如我想用一个jquery的插件，但是npm找不到，我下载到本地之后怎么加载，怎么配置？?
目的就是想用webpack + jquery + jquery插件 管理项目，请问webpack怎么配置？
百度了好多遍，依然找不到答案，也许是我对webpack了解不够。
看了阮一峰的github上的webpack& demos，第十二个demo，是webpack + jquery 的demo，可是怎么添加插件还是不懂- -，
/ruanyf/webpack-demos/tree/master/demo12
原来，对于不支持CommonJS规范的模块，需要安装：
局部安装：
npm install imports-loader --save-dev
entry.js文件设置：
var tab = require('imports?$=jquery!./jquery.tab');
webpack.confing.js配置：
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
new monsChunkPlugin('vendor', 'vendor.js')//这是第三方库打包生成的文件&]
&更........
互相学习，共同进步。
极客主页：
新浪微博：
已上传的图片列表：
尚未上传任何图片...
在线调试地址范例
例如：/gb/debug/bc4a78a6--b7cb-649ce1bda104.htm
以后再转发，立刻下载！