Nodejs：简单的脚手架

Posted 2020-08-24

html-webpack-plugin:  用来生成html文件的插件 

glob:  用来筛选文件，文件目录 

path:  管理文件路径 

---

 

次脚手架里主要用到的是这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‘],
    }
};