webpack配置|基于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一一对应的数组方便后续操作

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

文章图片

现在需要遍历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