webpack-dev-server-dynamic-entry
v1.0.3
Published
use dynamic entry to speed up compilation for multiple entry in webpack
Downloads
13
Maintainers
Readme
webpack-dev-server-dynamic-entry
在webpack多入口编译中,如果入口很多,在开发时第一次启动编译会用很久的时间。
但是实际上有些入口是用不到的,编译它完全是浪费时间
在开发环境时可以使用动态入口,在入口被访问的时候才去编译它,以此来减少编译时间
原理
使用函数作为webpack配置的entry,用中间件拦截devServer的收到的每一个请求,当请求命中入口文件,把入口添加到entry里,然后让webpack重新编译,等编译成功再返回请求的数据
entry一定要在调webpack(config)之前去拦截,改成函数,看了webpack暴露的接口,可以动态添加入口,没有删除入口
最后的问题关键是维护一个请求路径到entry的映射, 这里的解决方案有:
- 提供pathMaps配置,正则和entry的对应的集合
- ensuePage函数默认行为,路径为'/',加载index配置的entry,否则去遍历所有的entryName,看是否在路径中,如果在就编译该entry
- 重写ensuePage函数,此操作不覆盖pathMaps配置
使用
// webpack.config.js
const dynamicEntryPlugin = require('webpack-dev-server-dynamic-entry')
const dynamicEntry = dynamicEntryPlugin(entry, {index, ensuePage, pathMaps})
module.exports = {
entry: isDev ? dynamicEntry.entry : entry,
devServer: {
before: dynamicEntry.before
}
}
例子
cd ./example
npm install
npm start
只在开发模式的devServer的情况下使用
options配置
pathMaps
数组:默认无,路径到entry的映射,如下
{
pathMaps: [
{
from: '/', // string, regex,
to: '' // string (entry name), function(addEntry, match): Promise<any>
}
]
}
ensuePage
函数或者非真值:devServer每次收到请求ensuePage都会被调用
async function ensuePage(req, res, addEntry, remainEntry): Promise
如果提供了pathMaps,不需要再使用ensuePage,可以设置为false,避免多余的去匹配路由操作
index
字符串:配置请求路径为'/'时,编译的入口,在ensuePage为默认值时生效,默认值为'main'。
# addEntry,在ensuePage中使用addEntry
返回promise,动态添加入口,并等待编译完成
## 参数
- name, string 必需 entry name
- path, string 非必需
## 使用场景
- 入口已在allEntry中,不传path
- 新创建的文件夹,根据请求路径,对应到入口路径动态添加入口