重写webpack多页应用配置脚手架

之前写了一个webpack多页应用的配置，只有一个webpack.config.js文件，实现了多入口配置打包css,js,资源文件处理。因为入口entry配置需要自己添加，HtmlWebpackPlugin有多少个页面也要自己添加。这样看来虽然配置是成功的，但过于机械化，是不可取的

为什么要进行多页应用配置？

我们都知道开发vue,react这些应用时，一般都只有一个入口文件。而且官方都提供了自己的脚手架。可谓是很繁琐，偏离自己实际开发的环境时，这些脚手架就不能满足我们的要求了。虽然也有很多别人写的多页配置，但是感觉配置模块分离过于严重（我看不懂，囧），而且满足不了自己的需求，不适合新手学习使用。

很多传统网页的开发还是要写很多静态界面，比如我们公司，官网展示类的网站。如果要按照传统的开发模式，我们要为不同的页面添加css文件，js文件，这样大大的增加了工作量，而且很枯燥。而且不能使用es6,scss.
所以这个webpack多页配置就是为了解决这些问题，拥抱es6.
完整配置：webpack-M-pages

先看下脚手架的目录

│  .babelrc
│  .gitignore
│  a.txt
│  base.plugin.js //动态生成HtmlWebpackPlugin
│  entry.config.js//读取多页入口文件
│  package.json
│  pagesArray.js //获取多页文件，HtmlWebpackPlugin的参数
│  README.md
│  utils.js  //生产环境与开发环境
│  webpack.config.js
│  
└─src
    ├─common //公用样式
    │  ├─css
    │  │      reset.css
    │  │      
    │  └─js  //公用js
    │          common.js
    │          easyTable.js
    │          
    ├─css
    │  │  bootstrap.css
    │  │  index.css
    │  │  
    │  ├─pageA
    │  │      a.css
    │  │      as.scss
    │  │      
    │  ├─pageB
    │  │      b.css
    │  │      bb.scss
    │  │      
    │  └─pageC
    │          c.css
    │          
    ├─fonts
    │      glyphicons-halflings-regular.eot
    │      glyphicons-halflings-regular.svg
    │      glyphicons-halflings-regular.ttf
    │      glyphicons-halflings-regular.woff
    │      glyphicons-halflings-regular.woff2
    │      
    ├─img
    │      ph.jpg
    │      
    ├─js
        │      index.js
        │      mod.js
        │      pageA.js
        │      pageB.js
        │      pageC.js
        │      testm.js
        │      
        ├─lib
        │      easyTable.js
        │      mod.js
        │      
        └─pages
                index.html
                pageA.html
                pageB.html
                pageC.html

打包后的目录

│  index.html
│  pageA.html
│  pageB.html
│  pageC.html
│  
└─static
    ├─css
    │      index.css
    │      index.css.map
    │      pageA.css
    │      pageA.css.map
    │      
    ├─fonts
    │      glyphicons-halflings-regular.eot
    │      glyphicons-halflings-regular.ttf
    │      glyphicons-halflings-regular.woff
    │      glyphicons-halflings-regular.woff2
    │      
    ├─img
    │      glyphicons-halflings-regular.f721466.svg
    │      ph.50e1eb2.jpg
    │      
    └─js
            indexa94351a6f2b24f4c647a.js
            moda94351a6f2b24f4c647a.js
            pageAa94351a6f2b24f4c647a.js
            pageBa94351a6f2b24f4c647a.js
            pageCa94351a6f2b24f4c647a.js
            testma94351a6f2b24f4c647a.js
            vendorsa94351a6f2b24f4c647a.js

怎么自动注入entry配置？

webpack的entry配置是这样的

module.exports = {
    devtool: '#source-map',
    entry:{
        index:'',
        about:'',
        home:'',
        .....
       }
    }

1.问题来了，当入口文件很多的时候怎么办？ 一个个写？显然这是不可行的。怎么解决？

当然是读取文件夹下的文件了，然后写入配置呗。

//entry.config.js
var path = require('path');
var fs = require('fs');
let entry_files = {};
function each_file(dir) {
    try {
        fs.readdirSync(dir).forEach(function (file) {
            var file_path = dir + '/' + file;
            var fname = path.basename(file, '.js');
            entry_files[fname]=file_path;
        })
    } catch (e) {

    }
}
each_file('./src/js');
//entry_files是一个object对象，也就是遍历js文件夹下的js文件，然后写成entry所需配置的格式。
module.exports=entry_files;

OK，这样我们的入口配置文件就可以这样简写了。

var entry_files=require('./entry.config');
module.exports = {
    devtool: '#source-map',
    entry: entry_files,

    }

怎么自动配置HtmlWebpackPlugin？

这个其实就和自动注入entry配置一样，所以我们先看下 HtmlWebpackPlugin的配置

new HtmlWebpackPlugin({
        template: '',//你的html页面地址
        filename: '',//生成后html的名字
        chunks: ['vendors'],
        // hash:true,
        minify: {
            removeComments: true,
            collapseWhitespace: false //删除空白符与换行符
        }
    });

OK,一样的办法我们读取html模板文件，然后写成需要的格式呗

//pagesArray.js
var path = require('path');
var fs = require('fs');
let pagesArray = [];
function each_file(dir) {
    try {
        fs.readdirSync(dir).forEach(function (file) {
            /*
            * {
            *   index:'./src/index.html',
            *   chunkname:'index'
            * }
            * */
            var file_obj={};
            var file_path = dir + '/' + file;
            var chunk_name = path.basename(file, '.html');
            file_obj['filename']=file;
            file_obj['template']=file_path;
            file_obj['chuckName']=chunk_name;
            pagesArray.push(file_obj)
        })
    } catch (e) {

    }
}
each_file('./src/pages');
//导出我们需要的html模板信息
module.exports=pagesArray;

/*遍历页面，添加配置*/
pagesArray.forEach((page)=>{
    const htmlPlugin = new HtmlWebpackPlugin({
        template: page.template,
        filename: page.filename,
        chunks: ['vendors', page.chuckName],
        // hash:true,
        minify: {
            removeComments: true,
            collapseWhitespace: false //删除空白符与换行符
        }
    });

    base_plugin.push(htmlPlugin)

然后就可以这样配置webpack了

  plugins: require('./base.plugin')

这样就算我们完成了多页配置了，是不是很不错呢？

温馨提示

如何在windows下使用cmd命令生成文件树？

tree /f > tree.txt