Nodejs: Simple Scaffolding (i)

Html-webpack-plugin: plug-in for generating HTML filesGlob: used to filter files, file directory path: manage file paths

The main use of the Sub-scaffold is the 3 plug-ins, follow-up will be based on the use of plug-ins gradually improve scaffolding:

Entry part: define a glob object, under the Pages Directory search page path (index/index;login/index), The path according to this specification, easy to organize management, a small module for a page, the use of specific Glob objects are described earlier.

Plugins part: jquery was introduced, and public styles were extracted. Each template returned by the Ejs are generated in the Htmlwebpackplugin HTML file and output, here use the arrow function, es6, Note JS file needs to use Bable processing.

Loaders: are commonly used in general, my personal understanding of the different suffixes of the file for different processing, very similar.

Alias: define the path of the require, which can be easily handled when some components are referenced frequently.

The file directory is as Follows:

--SRC    |--pages    |       | --index    |       |       | --index    |       |           | --page.ejs    |       |           | --html.js    |       |           | --page.js        |       |           | --page.less    |       | --lgoin    |                | --.. Ibid.    |-public ....

　　

The scaffolding code is as Follows:

varWebpack = require (' webpack '));varGlob = require (' glob '));varPath = require (' path ');varPrecss = require (' precss '));varAutoprefixer = require (' autoprefixer '));varExtracttextplugin = require (' extract-text-webpack-plugin '));varHtmlwebpackplugin = require (' html-webpack-plugin '));varPublicdir = path.resolve (__dirname, './src ')varPagesdir = path.resolve (__dirname, './src/pages ')varStaticdir = path.resolve (__dirname, './src/static ')varBuildDir = path.resolve (__dirname, './build ')/** Entry*/varPageentry = {};varGlobinstance =NewGlob. Glob ('! ( _)*/! (_)*‘, {cwd:pagesdir, sync:true,                     }); varPagearr =Globinstance.found;pagearr.foreach (page)={pageentry[page]= path.resolve (pagesdir, page + '/page '));});/** Plugins*/varConfigplugins = [    NewWebpack. Provideplugin ({$:' jquery ', JQuery:' jquery ',        ' Window.jquery ': ' jQuery ',        ' window.$ ': ' jquery ',    }),    NewWebpack.optimize.CommonsChunkPlugin ({name:' Commons/commons ', Minchunks:2,    }),    NewExtracttextplugin ("[name]/styles.css")];/** plugins-for Ejs page * Page --login/index */Pagearr.foreach (page)={const Htmlplugin=Newhtmlwebpackplugin ({filename: ' ${page}/page.html ', template:path.resolve (pagesdir, './${page}/html.js '), chunks: [page,' Commons/commons '], hash:true, Xhtml:true,    });     Configplugins.push (htmlplugin); }); Module.exports={entry:pageentry, output:{path:builddir, filename:' [name]/entry.js '}, module:{loaders: [{test:/\.css$/, Exclude:/node_modules|bootstrap/, Loader:ExtractTextPlugin.extract (' Css?minimize&-autoprefixer!postcss '),}, {test:/\.less$/, include:publicdir, loader:ExtractTextPlugin.extract (' Css?minimize&-autoprefixer!postcss!less '),}, {test:/\.js$/, include:publicdir, loader:' Babel-loader?presets[]=es2015-loose&cachedirectory&plugins[]=transform-runtime ',}, {test:/\.html$/, include:publicdir, loader:' HTML ',}, {test:/\.ejs$/, include:publicdir, loader:' Ejs ',}, {test:/\. (png|jpg|gif) $/, include:publicdir, loader:' Url?limit=8192&name=./static/img/[hash]. [ext] ',}, {test:/\. (woff|woff2|svg|eot|ttf) \??. *$/, include:publicdir, loader:' File?name=static/fonts/[name]. [ext] ',        }] }, plugins:configplugins, resolve:{alias: {layout:path.resolve (publicdir,' Public-resource/layout '), public:path.resolve (publicdir,' Public-resource/public '), wrapURL:path.resolve (publicdir,' Public-resource/libs/constructinsideurl.js '),}, extentions: [", ' JS '],    }};

Nodejs: Simple Scaffolding (i)