學習筆記一

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)
}