学习笔记一

const srcRoot = path.resolve(__dirname,'src')

这种写法就是得到src的绝对路径

const pageDir = path.resolve(srcRoot,'page')

得到page文件夹的绝对路径，resolve相当于在第一个路径执行一个cd命令

 

entry多入口格式

entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }

 

fs.readdirSync(path)  同步得到路径

fs.statSync(path)   同步得到路径的文件格式信息

stat.isDirectory()  判断是否为文件夹

fs.existsSync(path)  判断路径是否存在

const mainFile= 'index.js'
function getEntry(){
	let entryMap = {}
	fs.readdirSync(pageDir).forEach((pathname)=>{
		let fullPathName = path.resolve(pageDir,pathname)
		let stat = fs.statSync(fullPathName)
		let fileName = path.resolve(fullPathName,mainFile)
		if(stat.isDirectory()&&fs.existsSync(fileName)){
			entryMap[pathname] = fileName
		}
	})
	return entryMap
}

const entryMap = getEntry();
module.exports = {
    	entry :entryMap,
}

　　该方法把page文件夹下每个路径进行遍历，如果这个路径是个文件夹并且文件夹里有index.js文件，则把文件夹名字作为key，文件夹绝对路径作为value返回一个对象，

webpack多入口写法为对象形式，名字+路径，

 

webpack对html文件的处理格式

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports  = {
    plugins: [new HtmlWebpackPlugin()]
}

　　多入口时的html文件处理

新建一个数组，遍历设置入口配置时产生的对象，入口配置时产生的对象格式为 { page下的文件夹名: 文件夹下index.js的绝对路径 }

找到page下文件夹中与文件夹名相同的.html文件，如果路径存在，在数组中加入new HtmlWebpackPlugin()  , 并配置插件使生成的html文件名字为不同文件夹名，路径对应入口文件绝对路径

function getHtmlArray(entryMap){
	let htmlArray = []
	Object.keys(entryMap).forEach(key=>{
		let fullPathName = path.resolve(pageDir,key)
		let fileName = path.resolve(fullPathName,key+'.html')
		if(fs.existsSync(fileName)){
			htmlArray.push(new HtmlWebpackPlugin({
				filename:key+'.html',
				template:fileName,
				chunks:[key]
			}))
		}
	})
	return htmlArray
}
const htmlArray = getHtmlArray(entryMap)
module.exports = {
    plugins:[].concat(htmlArray)
}