webpack打包老项目,那种jquery的,然后多页面的?

作者站长头像
站长
· 阅读数 29

webpack打包老项目,那种jquery的,然后多页面的webpack打包老项目,那种jquery的,然后多页面的?webpack打包老项目,那种jquery的,然后多页面的?这种的话要怎么定义入口呢,也不知道哪个是入口,入口一般都是有相应的和html同名的js文件,但是老项目是没有的,当然可以用htmlwebpackplugin生成多个html文件,但是它里面用哪些模块呢,也不知道入口,这种有没有什么解决方案呢,要是有例子的话就更好了

用了htmlwebpackpluginwebpack打包老项目,那种jquery的,然后多页面的?老项目中每个page底下的html没有相对应的js,不知道怎么生成js

回复
1个回答
avatar
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]
})
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容