首页 > 代码库 > 《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基础实战篇》课程笔记（六）--附加课