webpack打包jquery并引用

Posted 2020-09-30 最爱小虾

一，引入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就可以引用了。