webpack打包jquery并引用

一,引入webpack插件

//打包第三方
const CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");

二,要确定cnpm install jquery --save,之后在入口文件引入jquery;

module.exports = {
entry: {
app:PATHS.app,
vendor:['jquery']
// "jquery":[__dirname+'plugins/jquery/jquery.min.js']
// "bootcss":path( __dirname + "/src/plugins/bootstrap-3.3.7/dist/css/bootstrap.css"),
},
}

三,

plugins: [
//打包第三方
new CommonsChunkPlugin({
names: ['vendor','manifest']//manifest:抽取变动部分,防止第三方控件的多次打包
// filename:"chunk.js"//忽略则以name为输出文件的名字,否则以此为输出文件名字
}),
]

这么打包之后jquery需要require才能用的,在入口的index.js中,

//需要独立打包、异步加载的代码,使用require.ensure
require.ensure(['jquery'],function (require) {
var $ = require('jquery');
$(function(){
var w = $(".mwtsidebar").width()+1;
$(".side-sec-ul").css("left",w+"px");
$(".menu-triangle").css("top","204px");
$(".wrapper").mouseover(function () {
var h = $(this).height();
var of = $(this).offset().top;
var ofh = of+h/2;
$(".menu-triangle").css("top",ofh+"px");
$(this).find(".side-sec-ul").css('display','block');
}).mouseout(function () {
$(".menu-triangle").css("top","204px");
$(this).find(".side-sec-ul").css('display','none');
})
$(".nav>li").click(function () {
$("this").addClass("active");
})
});
});

这样,打包到dist下的vendor.js中的jquery就可以引用了。

上一篇:vue 使用webpack打包后路径报错以及 alias 的使用


下一篇:vue iView 打包后 字体图标不显示