简介
大家好,我是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里的配置来随意修改名称及路径,都不是固定的
注意点
- 用ejs封装公用组件的时候,require函数每个页面传进去的参数要一样多,不能少传,不然会报错,例如在src的html文件夹里ddp.html跟expressShipping.html文件都有引用toggle公用组件,ddp.html里的require需要传title跟flag这两个字段,而expressShipping.html里的require只需要传title,这个时候flag也需要传,传个空字符就可以了
- ddp.html
- expressShipping.html
- 通过ejs封装的公用组件传参数可以传任何类型的值,它就像vue里的插槽一样
结束
html里面有弄了几个html测试文件,大家可以运行下试看看
标签：jQuery,文件,webpack5,js,webpack,html,存放,组件,页面 From： https://blog.csdn.net/gaotlantis/article/details/143361462