Nodejs：简单的脚手架(一)

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'],

    }

};

巴特西

Nodejs：简单的脚手架(一)

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

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

path: 管理文件路径

最新文章

热门文章