基于webpack5+gulp4搭建的多页面应用项目模板.zip资源-CSDN文库

共59个文件

ts：23个

js：10个

json：4个

版权申诉

webpack

88 浏览量 2022-11-29 13:19:17 上传评论收藏 209KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

基于webpack5 + gulp4搭建的多页面应用项目模板.zip （59个子文件）

webpack5-multi-page-template-master

replaceLib.js 3KB

.husky

commit-msg 80B

pre-commit 64B

package.json 3KB

.commitlintrc.js 214B

pnpm-lock.yaml 354KB

.prettierignore 59B

.versionrc.js 908B

.lintstagedrc.js 215B

src

typings.d.ts 121B

model

zepto.ts 31B

component

index.scss 1KB

index.ts 2KB

toast

index.scss 494B

index.ts 2KB

assets

img

earth.png 8KB

fire-ico.png 6KB

page

index

index.html 1KB

index.scss 423B

index.ts 392B

about

index.html 426B

index.ts 31B

home

home.ts 30B

home.html 514B

service

index.ts 160B

constant.ts 436B

util

request.ts 304B

cache.ts 2KB

index.ts 5KB

.eslintrc.js 7KB

tsconfig.json 1KB

.gitignore 39B

.browserslistrc 32B

CHANGELOG.md 3KB

.prettierrc.js 3KB

public

billd.webp 7KB

zepto.min.js 26KB

lib-flexible.js 2KB

favicon.ico 4KB

README.md 5KB

script

config

webpack.prod.ts 6KB

webpack.common.ts 11KB

webpack.dev.ts 8KB

TerminalPrintPlugin.ts 644B

gulpfile.ts 8KB

pageConfig.ts 2KB

constant.ts 870B

utils

path.ts 137B

handlePage.ts 877B

chalkTip.ts 472B

InjectProjectInfoPlugin.ts 3KB

.eslintignore 59B

.editorconfig 754B

按需加载插件.md 2KB

.gitattributes 12B

postcss.config.js 1KB

babel.config.js 1KB

.vscode

settings.json 3B

extensions.json 3B

# 简介 > 在不使用框架开发项目的情况下，可以提供开箱即用、支持配置多页面的项目模板 - [x] 使用 webpack5 + gulp4 构建，支持开发热更新 - [x] 支持 typescript - [x] js 和 css 处理：babel + postcss - [x] css 预处理器： scss - [x] 提交规范：husky + commitizen + lint-staged - [x] 代码规范：eslint + prettier - [x] 插件内置：zepto.js + postcss-px-to-viewport # 注意该模板理论上拥有原生 js 开发的所有优点（无白屏、兼容性好、代码体积小...），但是如果你在该模板使用了 es6+的语法或特性，比如 promise、async/await、class 等等，最终 babel 会根据.browserslistrc 文件设置的值来打包（截止至 2022 年 11 月 8 号，设置>0.25，会打包成兼容 es5 的语法），最终生成的代码回比你的源代码体积大（因为 babel 的预设里使用了 polyfill），当然了这也是理所当然了，你要用高级语法又想要兼容旧版，就得引入 polyfill。你可以不使用这些高阶语法，在里面使用 es5 的语法写，那这样最终打包的体积就一定会比你用原生 js 开发的代码更小，因为 webpack 对源码做了压缩转化等等优化手段。而且该模板能让你更好的组织代码，能使用 css 预处理器等等优点。 # 使用 > 在大多数情况下，你只需要关注 config 目录里的 pageConfig.ts 即可，如果你希望拥有更高的自由度，可以直接修改 config 目录里面的配置以达到你的需求。 config/pageConfig.ts： ```typescript { name: 'index', // 这个页面的块（chunk）名 template: path.resolve(__dirname, '../src/page/index.html'), // 这个页面的html文件位置 entry: path.resolve(__dirname, '../src/page/index.ts'), // 这个页面的ts文件入口 hash: true, minify, chunks: ['index'], }, { name: 'home', // 这个页面的块（chunk）名 template: path.resolve(__dirname, '../src/page/home/home.html'), // 这个页面的html文件位置 entry: path.resolve(__dirname, '../src/page/home/home.ts'), // 这个页面的ts文件入口 hash: true, minify, chunks: ['home'], // chunks: ['home', 'index'], // 如果设置['home', 'index']，那么index的逻辑也会加到home页面 }, { name: 'about', template: path.resolve(__dirname, '../src/page/about/index.html'), // 这个页面的html文件位置 entry: path.resolve(__dirname, '../src/page/about/index.ts'), // 这个页面的ts文件入口 hash: true, minify, chunks: ['about'], // 限制块，如果希望about页面不和其他页面关联，就设置about }, ``` # 安装依赖 ```sh pnpm install ``` # 项目启动 ```sh pnpm run start ``` # 项目打包最终打包生成的目录：`dist` > 注意：如果你希望打包的 js、css 兼容不同浏览器等，请修改对应的: postcss.config.js、babel.config.js、.browserslistrc 文件！ ```sh pnpm run build ``` # 内联打包将所有外部 js 和 css 都注入到 html 里面，最终打包生成的目录：`inlineDist` ```sh pnpm run gulp:replace ``` # 内联打包将符合条件的外部 js 和 css 都注入到 html 里面，最终打包生成的目录：`inlineDist` ```sh pnpm run gulp:build ``` # 提交代码 ```sh pnpm run cz ``` # 更新版本 ```sh pnpm run release # 更新指定版本号 pnpm run release -- --release-as 1.0.0 ``` # 注意点 a.js： ```js console.log(document.getElementById('app'), 'aaa'); ``` b.js: ```js console.log(document.getElementById('app'), 'bbb'); ``` a.html： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script> console.log(document.getElementById('app')); //null </script> <script defer> console.log(document.getElementById('app')); //null </script>  <script src="b.js"></script>  <script defer src="a.js" ></script> </head> <body> <div id="app"></div> </body> </html> ``` 从结果看出，script 只有加上了 defer 标识以及使用了 src 链接外部 js，才是会异步的执行。一般的客户端渲染比如 vue，官方的 vuecli 的做法是将所有脚本加上 defer 标识然后挂载到 head 标签里的，这种行为其实对于客户端渲染来说没问题，因为都是延迟执行，放 head 标签的话还可以尽快解析然后尽快的加载。但是如果我们的没有使用 vue 之类的客户端渲染框架，而是使用原生 js 写的一些很小的项目，我们就希望我们的我们的 html 页面包含所有样式和脚本，因为项目足够小，将所有样式和脚本放 html 里面，只要加载一个 html 页面，就能显示完整的内容，而不需要额外的通过 link 和 script 标签请求外部的样式和脚本，因为项目小，可能拆出去的脚本和样式就几 k，那么还不如将他们直接塞入到 html 页面里面，这样还能减少网络请求。 > 将**html-webpack-plugin** 插件的 inject 的值设置为 body，否则默认是将 script 注入到 head 里面的

评论收藏

内容反馈

版权申诉