首页 > 代码库 > 《nodejs+gulp+webpack基础实战篇》课程笔记(六)--附加课

《nodejs+gulp+webpack基础实战篇》课程笔记(六)--附加课

一、多页面分离资源引用,按需引用JS和css

  我们前面实现了以下功能:1、新建了一个login模版(用到htmlWebpackPlugin)。2、分别把main.js和login.js、reg.js分开写。3、学习了css加载器。我们通过webpack可以打包js文件、自动注入js和CSS引用。

  那么我们要加载多页面如何操作呢?现在我们就在/src/tpl 文件夹下新件一个index.html文件,在CSS加入index.css,随便写两个样式,然后在/src/下新建一个index.js,随便写两个JS代码,来测试下这个如何操作。

var HtmlWebpackPlugin = require(‘html-webpack-plugin‘);//万事先引用var webpack = require("webpack");var ExtractTextPlugin = require("extract-text-webpack-plugin"); //初始化module.exports={    /*entry: [    //entry 是入口文件,可以多个,代表要编译那些js        ‘./src/main.js‘,        ‘./src/login.js‘,        ‘./src/reg.js‘,    ],*/    entry:{ //多节点设置        "main":‘./src/main.js‘,        "user":[‘./src/login.js‘,‘./src/reg.js‘],        "index":[‘./src/index.js‘]    },    output:{        path: __dirname+‘/build/js‘,      //输出文件夹        filename: ‘[name].js‘    //最终打包生成的文件名    },    externals: {    ‘jquery‘: ‘jQuery‘   //或者 ‘jquery’:’$’    },    //加载css    module:{        loaders:[   //设置加载器            //{test:/\.css$/},loader:"style!css"}            {test:/\.css$/,loader:ExtractTextPlugin.extract("style","css")} // test属性是一个正则,loader属性知名加载器,!是连接符        ]    },plugins:[        new HtmlWebpackPlugin({            filename: __dirname + ‘/build/html/login.html‘,            template: __dirname + ‘/src/tpl/login.html‘,            inject:"body",            //hash:true            chunks:["main","user"]        }), //初始化这个对象    new HtmlWebpackPlugin({        filename: __dirname + ‘/build/html/index.html‘,        template: __dirname + ‘/src/tpl/index.html‘,        inject:"body",        //hash:true        chunks:["main","index"]    }), //初始化index.html        new webpack.ProvidePlugin({            $:‘jquery‘  //这里请确保你的jquery已经安装了。否则要路径引用哦        }),        /*new webpack.optimize.CommonsChunkPlugin({            name:"user",            //entry定义的节点名            filename:"user.js"       //最终要生成到文件名        }),*/        new ExtractTextPlugin("[name].css") //根据我们自己的文件名来生成]}

  然后生成看看,下面我们还将对文件进行优化,消除一些冗余。


二、用webpack的CommonsChunkPlugin提取公共代码的3种方式

  通过CommonsChunkPlgin这个插件,我们可以把公共代码提取出来,有下列三个办法:

  1、传入字符串参数 

new webpack.optimize.CommonsChunkPlugin("commons.js")//默认会把所有的入口节点的公共代码给提取出来,生成一个common.js

  2、数组格式

new webpack.optimize.CommonsChunkPlugin("common.js",["main","index","user"]),

  3、(推荐)

new webpack.optimize.CommonsChunkPlugin({   name:"common",     //注意:不需要.JS后缀   chunks:["main","user","index"]       //提取公共部分})

三、利用webpack在项目中使用jQuery插件的正确姿势

  1、我们先用土办法引用两个jquery插件,在先前用来做测试的login.html中的表单加上ID,对需要做验证的文本筐加入代码。

  2、在login.js中写如一个SCRIPT代码段

require("./css/user.css");$.validator.setDefaults({    submitHandler: function() {        alert("验证通过!");    }});$(document).ready(function() {    $("#txtUserLogin").formInputLetter({        len : 10,//限制输入的字符个数        showId : "lenMsg"//显示剩余字符文本标签的ID    });    $("#userfrm").validate();});

 

  OK,node中webpack,看下,能实现我们预想的登录验证效果,不过这不是我们想要的。。。

  我们在LOGIN中加入下面的引用,

require("./lib/jquery.validate.min.js");require("./lib/jquery.formInputLetter.js");

  而不再使用原来的土方法引用,这样更方便和先进。

  既然我们已经引用了,那么我们也应该在WEBPACK.CONFIG.JS中写入代码,让webpack能把这两个插件打包并分离公共部分。

版权声明:笔记整理者亡命小卒热爱自由,崇尚分享。但是本笔记源自www.jtthink.com(程序员在囧途)沈逸老师的《前端开发速学成财(nodejs+gulp+webpack基础实战篇)。本学习笔记小卒于博客园首发, 如需转载请尊重老师劳动,保留沈逸老师署名以及课程来源地址 .

上一课:《nodejs+gulp+webpack基础实战篇》课程笔记(五)-- 实战演练,构建用户登录

下一课:

 

  

 

《nodejs+gulp+webpack基础实战篇》课程笔记(六)--附加课