webpack5配置传统jQuery多页面应用

简介

大家好,我是chenms,

最近我们公司有要求需要开发几个以前传统的前后端不分离的jQuery老项目,现在大部分都是用vue或者react开发习惯了组件化的方式,所以我这边打算用webpack5配置一个可以打包传统jQuery多页面应用

想法

• 通过配置postcss给css自动加上前缀
• 通过配置babel把es6等高级语法自动转换成es5
• 有时候需要把本地的一些资源直接复制到打包文件夹里,可以通过copy-webpack-plugin配置
• 通过配置html-webpack-plugin插件来打包多页面文件
• 通过nodejs里的fs读取某个文件夹里的所有.html结尾的文件自动通过copy-webpack-plugin配置出多文件
• 通过ejs的模板语法把公用的组件抽离出来复用

模板地址 

目录结构

• src 根目录
  • components 存放公用组件
  • css 存放样式文件
  • fonts 存放字体文件
  • html 存放html页面文件
  • images 存放图片文件
  • js 存放js文件
  • local-js 存放本地js文件库
  • webpack.config.js 配置文件

src里文件及文件夹名称及路径可以修改webpack.config.js里的配置来随意修改名称及路径,都不是固定的

注意点

1. 用ejs封装公用组件的时候,require函数每个页面传进去的参数要一样多,不能少传,不然会报错,例如在src的html文件夹里ddp.html跟expressShipping.html文件都有引用toggle公用组件,ddp.html里的require需要传title跟flag这两个字段,而expressShipping.html里的require只需要传title,这个时候flag也需要传,传个空字符就可以了

• ddp.html

• expressShipping.html

1. 通过ejs封装的公用组件传参数可以传任何类型的值,它就像vue里的插槽一样

结束

html里面有弄了几个html测试文件,大家可以运行下试看看