基于webpack3.x的多页面配置（HtmlWebpackPlugin学习篇二 ——动态配置）

多页面webpack配置

基于webpack3.x的多页面配置（HtmlWebpackPlugin学习篇一 ——基础篇）

• 首先动态将entry配置出来，entry主要是js文件，得到的形式需要是

{
	'pageA':'./src/js/pageA.js',
	'pageB':'./src/js/pageB.js',
	'pageC':'./src/js/pageC.js',
	....
}

• 所以需要遍历你文件下的js和html，我期望能得到一个html和js一一对应的数组方便后续操作

• 现在需要遍历pageA.js和pageB.js
• webpack.config.js里写方法

const glob = require('glob');
let chunks = [];
let getentries= function () {
  var entryFiles = glob.sync('./src/**/*.js')
  var map = {};

  for (var i = 0; i < entryFiles.length; i++) {
      var filePath = entryFiles[i];
      var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
      map[filename] = filePath; 
      //得到map={'pageA':'./src/js/pageA.js','pageB':'./src/js/pageB.js'}
      chunks.push(filename)   //chunks = ['pageA','pageB']
  }
  return map;
}
let entries = getentries();

configs.push({
  entry: entries,
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
 ...
})

• 接下来配置html和chunks的对应，构建htmlWebpackPlugin

let getHtml = function(){
	let htmls= glob.sync('./src/*.html');
	for(var i = 0; i < htmls.length; i++){
	let conf = {
          filename: chunks[i]+'.html', //生成的html存放路径，相对于path,例如pageA.html
          template: htmls[i],  // html模板路径
          inject: 'body',
          chunks: [entries[chunks[i]]]
      };
      if (process.env.NODE_ENV === 'production') {
        conf.hash = true;
      }
      configs.plugin.push(new HtmlWebpackPlugin(conf));
	}
}

export default configs

• 简单动态配置entry就结束啦。
• 如果复杂一点的文件夹，例如
  
  一般取html下，可以用glob.sync('./src/html/**/**/*.js')来遍历入口js，./src/html/**/**/*.html遍历html
• map[filename]的索引filename可以取例如index/classify，在配置output的时候也会自动生成文件夹下的html

最重要的是glob需要引入哦const glob = require('glob');