webpack打包jquery并引用

webpack文章/教程1年前 (2023)发布勤奋小助

0 0

一，引入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");
        })
    });
});