/webpack-multi-page

webpack 前端多页项目工程

Primary LanguageJavaScriptMIT LicenseMIT

webpack-multi-page

基于 webpack v4 的前端多页项目工程,适用于展示型站点,比如官网。

特性

  • 支持 ES6+ 语法,使用 babel 编译,预设 preset-env

  • html 支持 ejs 语法,使用 underscore-template-loaderHtmlWebpackPlugin 编译,详细语法可查看 underscore 或者 lodash _.template 函数部分。另外 underscore-template-loader 提供 Macros (宏) 的特性可自定义静态内容,内置 require 宏可在页面 html 文件内引入公共 html 组件,比如 header、footer 之类多页面公共组件,并且可以提供参数给组件;

  • 已内置第三方 css 库 normalize.css@^8.0.1 和 js 库 jquery@^3.5.1 可全局使用,无需声明引入;

  • html、css、js 文件内资源引用全部使用相对路径并且会自动判断是否转为 base64 格式;

  • 支持 css autoprefixer,无需手写浏览器兼容;支持 css @import 语法;

  • 打包采用内容 hash,文件内容未改变情况下多次打包不会修改文件名中的 hash 值;

  • 无需手动添加页面 webpack entry,只需按照 pages 目录结构添加页面即可;

页面目录结构

|-- pages/                        -- 源文件
|   |-- index.html                  -- 主页面
|   |-- index.css
|   |-- index.js
|   |-- page-a/                     -- page-a 页面
|       |-- index.html
|       |-- index.css
|       |-- index.js
|       |-- sub-page-a                  -- page-a 子页面
|           |-- index.html
|           |-- index.css
|           |-- index.js
|   ... (more like page-a)

建议

  • 打包之后的文件目录是有讲究的,除 .html 之外的资源,全部放在 dist/assets 目录下;

    (可选)打包前将 webpack.conf/utils/constant.js assetsPublicPath 的值修改为 CDN 地址,打包后可将 dist/assets 目录直接放到 CDN。

使用

下载项目

# 安装依赖
  yarn

# 本地开发
  npm run serve

# 打包构建
  npm run build

LICENSE

MIT