重写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