webpack打包老项目,那种jquery的,然后多页面的?
webpack打包老项目,那种jquery的,然后多页面的这种的话要怎么定义入口呢,也不知道哪个是入口,入口一般都是有相应的和html同名的js文件,但是老项目是没有的,当然可以用htmlwebpackplugin生成多个html文件,但是它里面用哪些模块呢,也不知道入口,这种有没有什么解决方案呢,要是有例子的话就更好了
用了htmlwebpackplugin老项目中每个page底下的html没有相对应的js,不知道怎么生成js
回复
1个回答
test
2024-09-11
看一下这个项目,应该符合你的要求:https://github.com/nqdy666/wjsp作者的思路是结合glob正则匹配来设置一个目录下的页面(项目里是jsp,其实html也一样)为模板文件,然后给定一个输出的目录,具体怎么写请仔细看一下他的写法,作者在他的项目主页的文档也写了思路。大概的代码:
//工具函数
exports.getJspMapPath = function () {
const list = []
var files = glob.sync(pathResolve.src('pages/**/*.jsp'))
for (let i = 0; i < files.length; i++) {
let srcFilePath = path.normalize(files[i])
list.push({
src: srcFilePath,
dist: srcFilePath.replace(pathResolve.src('pages'), pathResolve.dist('WEB-INF/jsp'))
})
}
return list
}
//webpack的配置文件
const htmlWebpackPlugins = utils.getJspMapPath().map(function (mapEntry) {
const conf = {
filename: mapEntry.dist, // 生成的html存放路径,相对于path
template: mapEntry.src, // html模板路径
inject: false,
cache: false
}
const indexJsp = jsJspMapData.filter(item => {
return item.jspPath === mapEntry.dist
})[0]
if (indexJsp) {
conf.inject = 'body'
conf.chunks = ['manifest', 'vendor', indexJsp.name]
}
return new HtmlWebpackPlugin(conf)
})
因为webpack肯定需要配置入口js文件,他的写法是手动这样一个一个去匹配,你可以研究下有没有更好的方法:
const jsJspMap = [
{ name: 'index', jsPath: jsPathResolve('index/index.js'), jspPath: jspPathResolve('index/index.jsp') },
{ name: 'start', jsPath: jsPathResolve('start/index.js'), jspPath: jspPathResolve('start/index.jsp') },
{ name: 'contact', jsPath: jsPathResolve('contact/index.js'), jspPath: jspPathResolve('contact/index.jsp') }
]
const entries = {}
//这里作者加了polyfill
jsJspMapData.forEach(item => {
entries[item.name] = [pathResolve.src('polyfills/index.js'), item.jsPath]
})
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容