最近有一個(gè)項(xiàng)目，還是使用的傳統(tǒng) MVC 模式開發(fā)，完全基于jQuery，使用了基于java模板引擎velocity，頁面中嵌入了大量java語法，使得前后端分離不徹底，工程打包上線苦不堪言，為實(shí)現(xiàn)后端為服務(wù)化，前端也得徹底從后端中分離出來。

方案: webpack4 + ejs

webpack

ejs

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

webpack 配置

基本插件

es6 語法轉(zhuǎn)譯

編譯打包c(diǎn)ss

解析sass

自動(dòng)給樣式增加瀏覽器前綴

將css從js中抽離出來為單獨(dú)文件

壓縮css

壓縮js

解析ejs模板文件

生成html文件

刪除文件、文件夾

監(jiān)聽文件變化

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

入口文件

入口文件長(zhǎng)這樣(可單一入口，也可多入口)：

// 多入口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] 對(duì)應(yīng)入文件的 key 值，/ 分割文件夾。

最后就會(huì)在dist文件夾下生產(chǎn)文件：

既然是多頁面開發(fā)，就要有多個(gè)入口，每個(gè)頁面都要有自己對(duì)應(yīng)的js入口，這樣我們只需要遍歷html文件，然后找到對(duì)應(yīng)的js，處理成 entry 對(duì)象即可

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('/')   // 根據(jù)html路徑找到對(duì)應(yīng)的js路徑，js可以和html放在同一文件夾，也可單獨(dú)放在一個(gè)文件夾內(nèi)，只要能找到   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單獨(dú)放在一個(gè)文件夾內(nèi) }) return entry})(glob(path.resolve(__dirname, '../src/page/*/*.html'), {sync: true}))