webpack-mvc传统多页面组件化开发详解

　　

最近有一个项目,还是使用的传统MVC模式开发,完全基于jQuery,使用了基于java模板引擎速度,页面中嵌入了大java语量法,使得前后端分离不彻底,工程打包上线苦不堪言,为实现后端为服务化,前端也得彻底从后端中分离出来。

　　

<强>方案:webpack4 + ejs

　　

<强> webpack

　　

　　<李>打包所有的资源李 　　<李>打包所以的脚本李 　　<李>打包所以的图片 　　<李>打包所以的样式李 　　<李>打包所以的表 　　

　　

<强> ejs
　　

　　

高效的JavaScript模板引擎,代替速度

　　

<强> webpack配置
　　

　　

<>强基本插件

　　

　　<李> @babel/核心,@babel/preset-env babel-loader李 　　

　　

es6语法转译

　　

　　<李> css-loader, style-loader李 　　

　　

编译打包css

　　

　　<李> node-sass, sass-loader李 　　

　　

解析sass 　　

　　<李> postcss-loader, autoprefixer李 　　

　　

自动给样式增加浏览器前缀

　　

　　<李> mini-css-extract-plugin李 　　

　　

将css从js中抽离出来为单独文件

　　

　　<李> optimize-css-assets-webpack-plugin李 　　

　　css

压缩 　　

　　<李> uglifyjs-webpack-plugin李 　　

　　

压缩js 　　

　　<李> ejs-loader李 　　

　　

解析ejs模板文件

　　

　　<李> html-webpack-plugin李 　　

　　

生成html文件

　　

　　<李> rimraf李 　　

　　

删除文件,文件夹

　　

　　<李>看 　　

　　

监听文件变化
　　

　　

上面是一些要用的插件,具体用法不累述。

　　

<强>入口文件
　　

　　

入口文件长这样(可单一入口,也可多入口):

　　 　　//多入口 　　条目:{ 　　pageA:“。/src/pageA/index.js”, 　　pageB:“。/src/pageB/index.js”, 　　“pageC/登录”:“。/src/pageC/登录/login.js ' 　　} 　　之前 　　 　　

出口文件:

　　 　　 　　输出:{ 　　文件名:“[名字]. js”, 　　路径:路径。解决(__dirname“. ./dist”), 　　} 　　之前 　　 　　

文件名值中的[名字]对应入文件的关键值,/分割文件夹。
　　

　　

最后就会在dist文件夹下生产文件:

　　

　　<李> dist/pageA index.js李 　　<李> dist/pageB index.js李 　　<李> dist/pageC/登录/login.js李 　　

　　

既然是多页面开发,就要有多个入口,每个页面都要有自己对应的js入口,这样我们只需要遍历html文件,然后找到对应的js,处理成条目对象即可

　　 　　 　　const path=要求(“路径”) 　　const水珠=要求(“水珠”) 　　 　　const页面=(条目=比;{ 　　让输入={},htmlArr=[]//格式化生成入口 　　entries.forEach((文件)=比;{//...../webpack-mvc/src/页面/pageA/index . html 　　常量文件分割器=file.split (“/? 　　const长度=fileSplit.length//页面入口pageA/index . html 　　const filePath=文件分割器。片(- 2长度,长度). join (“/?//根据html路径找到对应的js路径,js可以和html放在同一文件夹,也可单独放在一个文件夹内,只要能找的到 　　const jsPath=路径。解决(__dirname“. ./src/页面/$ {filePath.split (' . ') [0]} . js”)//_main。ejs页面主题框架,html组件化 　　pageHtml=路径。解决(__dirname“. ./src/_main.ejs”) 　　 　　如果(! fs.existsSync (jsPath)) { 　　返回; 　　} 　　条目[' js/' + filePath.split (' . ') [0]]=jsPath//加js/即表示将打包后的js单独放在一个文件夹内 　　}) 　　返回条目 　　})(水珠(路径。解决(__dirname“. ./src/页面/*/* . html”),{同步:真})) 　　之前 　　 　　

上面只是本例的目录结构,根据不同的目录结构,更改路径即可,目的就是得到的js打包生成路径”:“入口js的映射关系。

　　

<强> html (ejs)组件化
　　

　　

<强>页面框架
　　

　　

1,主体框架src/_main.ejs

　　 　　 　　& lt; !DOCTYPE html> 　　& lt; html lang=癳n”比; 　　 　　& lt; head> 　　& lt;元charset=皍tf - 8”比; 　　& lt;元http-equiv=癤-UA-Compatible”内容=癐E=边缘”比; 　　& lt;元name=笆哟啊蹦谌?翱矶?设备宽度,初始=1.0”比; 　　& lt; title> & lt; %=htmlWebpackPlugin.options。标题%祝辞& lt;/title> 　　& lt;/head> 　　 　　& lt; body> 　　& lt; div类=爸髋缤贰北? 　　& lt; %=需要(“@/共同/组件/头/header.ejs ')() %比; 　　& lt;/div> 　　 　　& lt; div类=爸饕谌荨北? 　　& lt; %=htmlWebpackPlugin.options。内容%比; 　　& lt;/div> 　　 　　& lt; div类=癿ain-foot”比; 　　& lt; %=需要(“@/共同/组件/页脚/footer.ejs ')() %比; 　　& lt;/div> 　　& lt;/body> 　　 　　& lt;/html> 　　 　　

webpack-mvc传统多页面组件化开发详解