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

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

方案: webpack4 + ejs

webpack

ejs

高效的 JavaScript 模板引擎，代替 velocity

webpack 配置

基本插件

es6 语法转译

编译打包css

解析sass

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

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

压缩css

压缩js

解析ejs模板文件

生成html文件

删除文件、文件夹

监听文件变化

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

入口文件

入口文件长这样(可单一入口，也可多入口)：

// 多入口entry: { pageA: './src/pageA/index.js', pageB: './src/pageB/index.js', 'pageC/login': './src/pageC/login/login.js'}

出口文件：

output: { filename: '[name].js', path: path.resolve(__dirname, '../dist'),}

filename 值中的 [name] 对应入文件的 key 值，/ 分割文件夹。

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

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

const path = require('path')const glob = require('glob')const pages = (entries => { let entry = {}, htmlArr = [] // 格式化生成入口 entries.forEach((file) => {  // ...../webpack-mvc/src/page/pageA/index.html  const fileSplit = file.split('/')  const length = fileSplit.length  // 页面入口 pageA/index.html  const filePath = fileSplit.slice(length - 2, length).join('/')   // 根据html路径找到对应的js路径，js可以和html放在同一文件夹，也可单独放在一个文件夹内，只要能找到   const jsPath = path.resolve(__dirname, `../src/page/${filePath.split('.')[0]}.js`)   // _main.ejs 页面主题框架，html组件化  pageHtml = path.resolve(__dirname, '../src/_main.ejs')   if (!fs.existsSync(jsPath)) {   return;  }  entry['js/' + filePath.split('.')[0]] = jsPath // 加 js/ 即表示将打包后的js单独放在一个文件夹内 }) return entry})(glob(path.resolve(__dirname, '../src/page/*/*.html'), {sync: true}))