"nodejs+gulp+webpack Basic combat" Course notes (vi)--additional Lessons

one, multi-page separation of resource references, reference JS and CSS as needed

　We implemented the following functions in front of us: 1, a new login template (used to htmlwebpackplugin). 2, respectively Main.js and login.js, reg.js separate Write. 3, learned the CSS Loader. We can package JS files, automatically inject JS and CSS references via WEBPACK.

So how do we load a multi-page operation? Now we are in The/src/tpl folder under the new piece of a index.html file, in the CSS to add index.css, casually write two styles, and then create a new index.js under/src/, write two JS code randomly, to test how this Operation.

varHtmlwebpackplugin = require (' html-webpack-plugin ');//Universal Pre-quotevarWebpack = Require ("webpack");varExtracttextplugin = Require ("extract-text-webpack-plugin");//Initializemodule.exports={    /*entry: [//entry is a portal file, can be multiple, representing to compile those JS './src/main.js ', './src/login.js ', './src/reg.js ',], */entry:{//multi-node Settings"main": './src/main.js ',        "user": ['./src/login.js ', './src/reg.js '],        "index": ['./src/index.js ']}, output:{path: __dirname+ '/build/js ',//output FolderFilename: ' [name].js '//the file name of the final package build}, externals: {' jquery ': ' jquery '//or ' jquery ': ' $ '    },    //Loading CSSmodule:{loaders:[//Set Loader            //{test:/\.css$/},loader: "style!css"}{test:/\.css$/,loader:extracttextplugin.extract ("style", "css")}//the Test property is a regular, loader property known loader,! is a connector]},plugins:[Newhtmlwebpackplugin ({filename: __dirname+ '/build/html/login.html ', Template: __dirname+ '/src/tpl/login.html ', Inject:"body",            //hash:true            chunks:["main", "user"]        }), //Initialize This object    Newhtmlwebpackplugin ({filename: __dirname+ '/build/html/index.html ', Template: __dirname+ '/src/tpl/index.html ', Inject:"body",        //hash:true       chunks:["main", "index"]    }), //Initialize index.html        NewWebpack. Provideplugin ({$:' jquery '//here, Make sure your jquery is Installed. otherwise, a path reference .        }),        /*New Webpack.optimize.CommonsChunkPlugin ({name: "user",//entry the node name defined by Filename: "USER.J s "//end to generate to file name}),*/        NewExtracttextplugin ("[name].css")//based on our own file name to generate]}

　　Then generate a look, and below we will also optimize the files to eliminate some redundancy.

second,3 Ways to extract common code with Webpack's Commonschunkplugin

By Commonschunkplgin This plugin, we can extract the public code, there are the following three ways:

1. Incoming string parameters

new webpack.optimize.CommonsChunkPlugin ("commons.js")// Default will extract the public code of all the entry nodes, Generate a Common.js

2. Array format

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

3. (recommended)

New webpack.optimize.CommonsChunkPlugin ({   name:"common",     // note: not required.) JS suffix   chunks:["main", "user", "index"]       // Extract public part })

third, using the Webpack in the project to use the jquery plug-in the correct posture

1, We first use the soil method to refer to two jquery plug-ins, in the previous login.html used to do the test form plus id, the need to verify the text basket to add Code.

2. Write in Login.js as a script snippet

Require ("./css/user.css"); $.validator.setdefaults ({    function() {        alert ("validate Pass!") );    }}); $ (document). Ready (function() {    $ ("#txtUserLogin"). forminputletter ({        the number of characters        showid: "lenmsg"// displays the ID of the remaining character text label    });    $ ("#userfrm"). validate ();});

　Ok,node in webpack, look, can achieve our expected login verification effect, But this is not what we want ...

We add the following reference in login,

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

Instead of using the original soil method reference, This is more convenient and advanced.

Now that we have quoted, we should also write the code in WEBPACK.CONFIG.JS, so that Webpack can package and separate the two plugins into the public part.

Copyright notice: Note-taker Fugitive Pawns Love freedom, advocating sharing. But this note stems from www.jtthink.com (programmer in the awkward way) judging teacher's "front- End development of the rapid study of wealth (nodejs+gulp+webpack basic combat)". This study note pawn in the blog Park debut, if need to reprint please respect the teacher labor, retain judging teacher attribution and course source Address.

previous Lesson: "nodejs+gulp+webpack Basic combat" Course Note (v)--practical walkthrough, build user Login

Next lesson:

　　

"nodejs+gulp+webpack Basic combat" Course notes (vi)--additional Lessons