function createTemplate(file, jsPath, entry) { let obj = { title: '', template: '', filename: '', chunks: [jsPath] } // _main.ejs 页面主题框架，html组件化 let mainHtml = path.resolve(__dirname, '../src/_main.ejs') let fileSplit = file.split('https://www.jb51.net/') // html 生成路径 let filename = fileSplit.slice(fileSplit.length - 2).join('https://www.jb51.net/').split('.')[0]; let strContent = fs.readFileSync(file, 'utf-8') let strMain = fs.readFileSync(mainHtml, 'utf-8') let template = fileSplit.slice(fileSplit.length - 2).join('_').split('.')[0]; strMain = strMain.replace(/<%= htmlWebpackPlugin.options.content %>/, strContent) fs.writeFileSync(path.resolve(__dirname, `../src/template/template_${template}.ejs`), strMain) obj.template = path.resolve(__dirname, `../src/template/template_${template}.ejs`) obj.filename = filename return obj }
有了上面方法的思路，我们可以在各自页面中做更多的操作
页面 title
// pageA/index.html <%=title 页面A %> <div> <h1>pageA index</h1> </div>
页面直接引入js，只压缩不打包
// pageA/index.html <%=title 页面A %> <div> <h1>pageA index</h1> </div> <script src="https://www.jb51.net/js/common/util.js"></script> <script src="https://www.jb51.net/js/common/server.api.js"></script>
这里引入js的路径是最终文件压缩生成的位置（dist目录下），因为开发模式和生产环境路径有所不同，所以等下在代码中要区别不同环境去替换不同的路径。
页面引入ejs组件
// pageA/index.html <%=title 页面A %> <div> <%= require('@/common/components/form.ejs')() %> <h1>pageA index</h1> </div> <script src="https://www.jb51.net/js/common/util.js"></script> <script src="https://www.jb51.net/js/common/server.api.js"></script>
page.config.js
const fs = require('fs') const path = require('path') const glob = require('glob') if (process.env.NODE_ENV === 'development') { const rimraf = require('rimraf') rimraf.sync(path.resolve(__dirname, '../src/template/*'), fs, function cb() { console.log('template目录已清空') }) } const pages = (entries => { let entry = {}, htmlArr = [] // 格式化生成入口 entries.forEach((file) => { // ...../webpack-mvc/src/page/pageA/index.html let fileSplit = file.split('https://www.jb51.net/') let length = fileSplit.length // 页面入口 page/pageA/index.html let filePath = fileSplit.slice(length - 3, length).join('https://www.jb51.net/') // 根据html路径找到对应的js路径，js可以和html放在同一文件夹，也可单独放在一个文件夹内，只要能找到 let jsFile = path.resolve(__dirname, `../src/${filePath.split('.')[0]}.js`) if (!fs.existsSync(jsFile)) { return; } let jsPath = 'js/' + filePath.split('.')[0] entry['js/' + filePath.split('.')[0]] = jsFile htmlArr.push(createTemplate(file, jsPath, entry)) }) return {entry, htmlArr} })(glob(path.resolve(__dirname, '../src/page/*/*.html'), {sync: true})) function scriptLinkEntry(entry, file) { // file: /js/common/js/util.js let fileNew = './src/' + file.split('https://www.jb51.net/').slice(2).join('https://www.jb51.net/') let fileSplit = fileNew.split('https://www.jb51.net/') entry['js/common/' + fileSplit.slice(fileSplit.length - 1).join('https://www.jb51.net/').replace('.js', '')] = fileNew } function replaceScript(content, entry) { let scriptLink = content.match(/<script.*src=["|'](.*)["|']><\/script>/g) if (scriptLink) { scriptLink.forEach(item => { // src: /js/common/js/util.js let src = item.match(/src=["|'](.*)["|']/)[1]; scriptLinkEntry(entry, src) let scriptlinNew = src // 生产环境根据页面路径找到js的相对路径，开发环境 /js/ 指向 dist 目录下 js 文件夹 if (process.env.NODE_ENV === 'production') { let srcSplit = src.split('https://www.jb51.net/') srcSplit.splice(3, 1) // ['', 'js', 'common', 'util.js'] scriptLinkNew = `..${srcSplit.join('https://www.jb51.net/')}` // ../js/common/util.js } content = content.replace(src, scriptLinkNew) }) } return content; } function createTemplate(file, jsPath, entry) { let obj = { title: '', template: '', filename: '', chunks: [jsPath] } // _main.ejs 页面主题框架，html组件化 let mainHtml = path.resolve(__dirname, '../src/_main.ejs') let fileSplit = file.split('https://www.jb51.net/') // html 生成路径 let filename = fileSplit.slice(fileSplit.length - 2).join('https://www.jb51.net/').split('.')[0]; let strContent = fs.readFileSync(file, 'utf-8') let strMain = fs.readFileSync(mainHtml, 'utf-8') let template = fileSplit.slice(fileSplit.length - 2).join('_').split('.')[0] // 提取页面title let titleMatch = strContent.match(/<%=title(.*)%>/) let title = '' if (titleMatch) { title = titleMatch[1] strContent = strContent.replace(/<%=title(.*)%>/, '') } // 提取页面与主体框架中引入的静态js文件，将其放入入口文件中经行压缩，并适应开发与生产路径 strMain = replaceScript(strMain, entry) strContent = replaceScript(strContent, entry) strMain = strMain.replace(/<%= htmlWebpackPlugin.options.content %>/, strContent) fs.writeFileSync(path.resolve(__dirname, `../src/template/template_${template}.ejs`), strMain) obj.title = title obj.template = path.resolve(__dirname, `../src/template/template_${template}.ejs`) obj.filename = filename return obj } module.exports = pages;
热刷新