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