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

Posted 2020-08-09

一、多页面分离资源引用,按需引用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基础实战篇》课程笔记（五）-- 实战演练，构建用户登录

下一课：