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 配置文件