码迷,mamicode.com
首页 > Web开发 > 详细

webpack打包jquery并引用

时间:2017-08-02 18:54:48      阅读:371      评论:0      收藏:0      [点我收藏+]

标签:css   异步加载   man   blog   npm   out   filename   app   ide   

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

webpack打包jquery并引用

标签:css   异步加载   man   blog   npm   out   filename   app   ide   

原文地址:http://www.cnblogs.com/wang715100018066/p/7275282.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!