多页面的脚手架解决方案，提供页面拆分成多个模块进行维护，目前只适用于纯静态页面的开发，或者部分基于 ajax 的项目开发，或对于 seo 有要求的项目开发

特点

• 使用 webpack 搭建，可以实现代码拆分，按需加载，可将视图与业务代码分离，资源管理
• 集成了 ejs 的部分功能，可以使页面在开发工程中更加颗粒化，可维护性更高
• 集成 babel，支持 es5+ 语法的使用，能支持到 ie9 的兼容
• 集成了 less 样式的编写，同时集成 poctss 可自动对多款浏览器做兼容操作，也可以根据需求，添加额外插件进行移动端的自适应开发

兼容处理

请新增或者修改项目中 package.json 中的 browserslist 的值，具体请参考相关文档

配置 multipage.config.js

| 参数 | 必选 | 类型 | 默认值 | 备注 | | :--------------: | :---: | :--------------: | :----: | ----------------------------------------------------------------------------------------------------------------------------------- | | pages | 是 | Array | 无 | 要导入的页面 | | publicPath | 否 | String | ./ | 资源的存储路径，可以放 cdn 地址 | | devServer | 否 | Object | | 参考 webpack 的 devServer 的配置 | | minify | 否 | Boolean|Object | true | html 页面的优化选项，具体参数可看minification |

pages

一个路径代表一个页面，单个路径中视图层文件 ejs 和 业务文件 js 的文件名应该统一，否则无法识别

module.exports = {
  // 页面配置
  pages: ['pages/index/index', 'pages/about/about'],
};

publicPath

module.exports = {
  // 公共路径
  // publicPath: 'https://cdn.xxxx.com/static'
  publicPath: './',
};

devServer

module.exports = {
  // webpack 的 devServer 配置
  devServer: {
    port: 3000,
    host: '0.0.0.0',
  },
};

minify

module.exports = {
  // html 页面配置
  // minify: false,
  minify: {
    collapseWhitespace: true,
    removeComments: true,
    removeRedundantAttributes: true,
    removeScriptTypeAttributes: true,
    removeStyleLinkTypeAttributes: true,
    useShortDoctype: true,
  },
};

EJS 中部分语法

在这里我对 EJS 的使用，暂时是用于页面的拆分，方面维护；

模块的引入

<%= require('./indexHeader.ejs')() %>

图片的导入

<img src="<%= require('./images/bg.png').default %>" alt="bg" width="300">

css的导入

import './index.less';