最近在系统学习webpack,记录一些小芝士点~
入口起点(entry points)
entry:String|Array<String>|Object
1.单个入口webpack
module.exports = { entry: './src/index.js' // 指定打包输出文件名 // entry: { // index: './src/index.js' // } };
webpack官网释义:当你向entry
传入一个数组时会发生什么?向entry
属性传入「文件路径(file path)数组」将建立“多个主入口(multi-main entry)”。在你想要多个依赖文件一块儿注入,而且将它们的依赖导向(graph)到一个“chunk”时,传入数组的方式就颇有用。git
2.多个入口github
module.exports = { entry: { index: './src/index.js', search: './src/search.js' } };
如上配置,打包出的文件有多个入口,适合多页面应用打包。web
可是这样配置,有一个问题:以后新增一个页面,就要修改entry,能不能写个方法自动读取呢?数组
const path = require('path'); const glob = require('glob'); const setMPA = () => { const entry = {}; // 入口文件路径 const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js')); Object.keys(entryFiles).map(index => { const entryFile = entryFiles[index]; const match = entryFile.match(/src\/(.*)\/index\.js/); const pageName = match && match[1]; entry[pageName] = entryFile; }); return { entry }; }; // 引入entry const {entry} = setMPA(); module.exports = { entry: entry };
好了,以上就是entry的一些小记录了~具体可移步Demo学习