次脚手架里主要用到的是这3个插件，后续会根据所用插件逐渐完善脚手架：
entry部分：定义一个glob对象，在pages目录下面搜寻页面路径（index/index;login/index），路径按照此规范写，方便后面组织管理，一个小模块为一个页面，具体glob对象的使用方法前面有介绍。
plugins部分：引入了jquery，同时提取了公共样式。每个模板返回的ejs都在HtmlWebpackPlugin里生成了html文件并输出，这里用到了箭头函数，es6的，注意js文件需要用bable处理一下。
loaders：都是一些常用通用的，我个人的理解为对不同后缀的文件进行不同的处理，大同小异。
alias：自己定义require的路径，当一些组件引用频繁的时候，可以放在这里面便于处理。
文件目录如下：
--src
|--pages
| |--index
| | |--index
| | |--page.ejs
| | |--html.js
| | |--page.js
| | |--page.less
| |--lgoin
| |--..同上
|-public....
脚手架代码如下：
var webpack = require('webpack');
var glob = require('glob');
var path = require('path');
var precss = require('precss');
var autoprefixer = require('autoprefixer');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var publicDir = path.resolve(__dirname, './src')
var pagesDir = path.resolve(__dirname, './src/pages')
var staticDir = path.resolve(__dirname, './src/static')
var buildDir = path.resolve(__dirname, './build')
/*
* entry
*/
var pageEntry = {};
var globInstance = new glob.Glob('!(_)*/!(_)*', {
cwd: pagesDir,
sync: true,
});
var pageArr = globInstance.found;
pageArr.forEach((page) => {
pageEntry[page] = path.resolve(pagesDir, page + '/page');
});
/*
* plugins
*/
var configPlugins = [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
'window.$': 'jquery',
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'commons/commons',
minChunks: 2,
}),
new ExtractTextPlugin("[name]/styles.css")
];
/*
* plugins - for ejs page
* page --> login/index
*/
pageArr.forEach((page) => {
const htmlPlugin = new HtmlWebpackPlugin({
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：简单的脚手架(一)的详细内容，更多关于Nodejs：简单的脚手架(一)的资料请关注九品源码其它相关文章！