此时热刷新只能监听到js和css的改变，因为模板是动态生成的，更改页面内容时模板并没有改变，所以无法触发devServer的热刷新，手动刷新也不会有变化，因为临时模板文件没有改变，借用插件 watch 来监听html文件变化，然后重写模板文件可解决问题。
const fs = require('fs') const path = require('path') const watch = require('watch') const { replaceScript } = require('./page.config.js') watch.watchTree(path.resolve(__dirname, '../src/page'), (f, curr, prev) => { if (typeof f == 'object' && prev === null && curr === null) { // Finished walking the tree } else if (prev === null) { // f is a new file createTemplate(f) } else if (curr.link === 0) { // f was removed } else { createTemplate(f) } }) function createTemplate(file) { if (file.indexOf('.html') === -1) { return } console.log('file', file) let mainHtml = path.resolve(__dirname, '../src/_main.ejs') let strContent = fs.readFileSync(file, 'utf-8') let strMain = fs.readFileSync(mainHtml, 'utf-8') let template = file.split('\\').slice(file.split('\\').length - 2).join('_').split('.')[0] // 提取页面与主体框架中引入的静态js文件，将其放入入口文件中经行压缩，并适应开发与生产路径 // 这里不再处理 title 和 静态js 入口压缩 strMain = replaceScript(strMain, {}, true) strContent = replaceScript(strContent, {}, true) strContent = strContent.replace(/<%=(.*)%>/, '') strMain = strMain.replace(/<%= htmlWebpackPlugin.options.content %>/, strContent) fs.writeFileSync(path.resolve(__dirname, `../src/template/template_${template}.ejs`), strMain) }
这里不再处理title和静态js入口压缩，更改了这些只能再重新 npm run dev
国际化
const languageProperty = require('../properties/language.properties.js') function getLanText(val) { let lan = 'zh' // $.cookie('lan') let str = languageProperty[val] && languageProperty[val][lan] || val let defaultOpt = languageProperty[val] && languageProperty[val]['default'] let opts = defaultOpt && $.extend(true, [], defaultOpt) opts ? opts.unshift('') : false let args = opts && arguments.length === 1 ? opts : arguments if (args.length > 1) { let params = Array.property.slice.call(args, 1) return str.replace(/{(\d+)}/g, function(curr, index) { return params[index] }) } else { return str } } function translateAll() { let num = $('html').find('[lang]').length let count = 0 if (num === 0) { $('body').show() } $('html').find('[lang]').each(function() { count += 1; let lang = $(this).attr('lang') if (lang === '') { return; } let nodeName = $(this)[0].nodeName let text = getLanText(lang) // 简单处理，复杂的可再这里更改 if (nodeName === 'INPUT') { $(this).attr('placeholder', text) } else { $(this).html(text) } if (count === num) { $('body').show() } }) } module.exports = { getLanText, translateAll }
在header.js里调用一次就可以了。
结语
至此，传统多页面组件化开发流程基本完成，可以完全脱离后台愉快的开发前端了，抛弃eclipse，拥抱vsCode。
此文只构建了基本的框架，中间还有很多优化点，打包速度，公共代码等等都没有去细究，等页面、代码量增加，这也是必须去研究的，路漫漫其修远兮。
Guthub 可直接 npm run dev, npm run build 运行， 顺便求个Star 😄