资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/webpack4多页面脚手架

webpack4多页面脚手架

张金宝 / 911人阅读

摘要：多页面脚手架移步多页面适用于多个静态页面的显示如官网复用头文件和尾部文件源码地址案例移动端官网新增自动创建文件功能添加新增文件的配置文件在里面添加对应的配置即可目录结构多页面配置文件可以改变的配置需要打包的页面名称配置文件夹页面文件夹

webpack4多页面脚手架 (移步webpack3多页面) 适用于多个静态页面的显示, 如官网 html-loader复用头文件和尾部文件 源码地址: https://github.com/WangZhenHao/webpack-multiple-page 案例:移动端官网 1.1.0 新增自动创建文件功能 
</>复制代码 
  1. 添加新增文件的配置文件  build/bin/new.js
  2. 在build/config/pages.js里面添加对应的配置即可
目录结构 
</>复制代码 
  1. │─build                                 多页面配置文件
  2. │     ├─config                          可以改变的配置 
  3. │     │ ├─pages.js                      需要打包的页面名称
  4. │     │ └─ index.js                      web server配置
  5. │     │ 
  6. │     ├─webpack.base.config.js 
  7. │     ├─webpack.dev.config.js
  8. │     └─webpack.prod.config.js
  9. │      
  10. │     
  11. │─src                                      // src 文件夹
  12. │    ├─pages                               // 页面文件夹
  13. │    │  ├─about
  14. │    │  │      about.html
  15. │    │  │      about.js
  16. │    │  │      about.scss
  17. │    │  │
  18. │    │  │ 
  19. │    │  │
  20. │    │  └─home
  21. │    │          home.html
  22. │    │          home.js
  23. │    │          home.scss
  24. │    │
  25. │    └─assets                          // 公共文件夹
  26. │          ├─ layout                   // 复用html     
  27. │          │     head.html             // 公共头文件 
  28. │          │ 
  29. │
  30. │
  31. │
  32. │─static                               //静态文件文件夹
  33. │    ├─js
  34. │    ├─css
  35. │    └─img                             (img)最好使用这个名称为文件夹
  36. │
  37. │  .babelrc                           // babel的配置文件
  38. │  .gitignore
  39. │  package.json
  40. │  README.md
构建步骤 
</>复制代码 
  1. # 安装依赖
  2. npm install
  3. # 开发的时候在本地启动, 并开始热加载
  4. npm run dev
  5. # production的发布时打包
  6. npm run build
qq讨论群: 475870039
云服务器 GPU云服务器 webpack4 多页面 多页面应用 webpack4教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104144.html

相关文章

  • 基于webpack4.x, babel7.x 搭建的多页面脚手架, 简化前端开发环境配置，开箱即用，

    摘要：开箱即用的多页面脚手架基于模块化开发可复用的现代化网站感兴趣的朋友，请点个及时关注项目更新请点个项目请提特性支持前后端分离开发配置完整的打包方案支持本地开发热更新集成代码风格校验支持编写源码，编译生成生产代码内置开发环境，自动加样式前缀自 Webpack-seed 开箱即用的多页面脚手架, 基于webpack4.2x babel7.1x模块化开发可复用的现代化网站(Without Vu...

    junfeng777 评论0 收藏0

  • 基于webpack4的VUE多页脚手架

    摘要：另外备注一部分参数的说明折叠有助于文档树中文本节点的空白区域对进行压缩默认默认按照不同文件的依赖关系来排序。敲黑板讲重点的当然目前这部分的文档在官网还不是很全，所以这里我们参考了印记中文的说明文档，指优化模块。 链接 写在前面 为什么要自己手写一个脚手架？ 如何去思考遇到的问题？ 正文 链接 原文链接 github whale-vue ——写在前面 1、为什么要自己手写...

    张金宝 评论0 收藏0

  • webpack4 系列教程: 前言

    摘要：课程地址全部课程地址立即进入课程源码目录截至按照知识点，目录分成了个文件夹之后还会持续更新。个人网站原文链接系列教程前言 本文档已经过时，最近内容请看：https://godbmw.com/passage/76。一共16节课程和代码。谢谢支持。 1. 什么是webpack? 前端目前最主流的javascript打包工具，在它的帮助下，开发者可以轻松地实现加密代码、多平台兼容。而最重要的...

    DevWiki 评论0 收藏0

  • webpack4+react多页面架构

    webpack在单页面打包上应用广泛，以create-react-app为首的脚手架众多，单页面打包通常是将业务js，css打包到同一个html文件中，整个项目只有一个html文件入口,但也有许多业务需要多个页面不同的入口，比如不同的h5活动，或者需要支持seo的官方网站，都需要多个不同的html，webpack-react-multi-page架构让你可以实现多页面架构，在项目开发中保证每个页面...

    liuyix 评论0 收藏0

发表评论

登陆后可评论

0条评论

张金宝

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<