Example in Multipage

[{"_1":2,"_167":-5,"_168":-5},"loaderData",{"_3":4,"_13":14,"_21":22,"_142":143},"root",{"_5":-5,"_6":-7,"_7":8,"_9":-7,"_10":11,"_12":-7},"currentUser","primaryEmail","siteVerification","6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI","toast","enableDev",false,"incidentStatus","routes/_layout",{"_15":-5,"_16":17,"_18":17,"_19":11,"_20":11},"username","isAskGordonEnabled",true,"isUsingNewTemplate","showMinimalLanding","showHoneypotTrap","routes/_layout.r.$namespace.$reponame",{"_23":24,"_25":-5,"_26":11,"_27":11,"_28":29,"_30":31,"_32":-5,"_33":11,"_34":35,"_84":-5,"_85":86,"_135":-5,"_136":11,"_137":17,"_138":11,"_139":-5,"_140":141},"canonicalUrl","https://hub.docker.com/r/pomelott/webpack-cli/tags","mcpServer","canSeeDockerfile","canSeeAutobuilds","namespace","pomelott","reponame","webpack-cli","cloudBuildSource","isAutobuildsAvailable","repo",{"_36":37,"_38":39,"_41":42,"_43":44,"_45":11,"_46":47,"_48":49,"_50":51,"_53":31,"_28":29,"_54":55,"_56":40,"_57":58,"_59":60,"_61":62,"_63":-5,"_64":58,"_65":66,"_67":11,"_68":29,"_69":70,"_75":11,"_76":77,"_81":29,"_82":83},"categories",[],"content_types",[40],"image","date_registered","2020-07-14T01:17:57.778601Z","description","based on slim ubuntu & fast build FE webpack env","is_private","last_updated","2021-07-06T05:54:30.558402Z","last_modified","2024-10-16T13:48:34.145251Z","media_types",[52],"application/vnd.docker.container.image.v1+json","name","pull_count",1402,"repository_type","star_count",0,"status",1,"status_description","active","source","collaborator_count","full_description","# webpack4-cli\n\n![webpack-versioin](https://img.shields.io/badge/webpack-4.0.0+-green)\n![node-versioin](https://img.shields.io/badge/node-v10.8.0-green)\n![npm-versioin](https://img.shields.io/badge/npm-v6.2.0-green)\n\n

\n\n### webpack4-cli 基于webpack@4，此cli可提供:\n\n1. 更加灵活的、切近实际工作流的目录结构, 既可单页也可多页.\n2. 更全面的构建功能（runtime-chunk、postcss、sass、less、gulp图片压缩、bundle分析、TS、vue-ts、react等）.\n3. 更高的扩展性，构建目标html快速定义、重写机制、cdnURL定制等.\n4. 更活跃、稳定的更新等.\n5. 基于实际工作流（不拿实际需求Coding都是耍流氓）\n6. 提供 Docker Image 供快速构建\n\n### 如果此cli帮助到您，欢迎给星，您的星星是我持续更新的动力！\n## 快速构建\n* 注：若不使用Docker，可跳过此项，直接进入[快速使用](https://github.com/pomelott/webpack4-cli#%E5%BF%AB%E9%80%9F%E4%BD%BF%E7%94%A8)。\n### 拉取镜像\n```bash\n docker pull pomelott/webpack-cli\n```\n### 启动开发环境\n注：以下文件目录可在本机自行创建，能够提供文件夹供容器挂载即可。\n* /Users/tate/Documents/work/geek/docker/ws/src: 用于存放资源文件，修改文件可验证启动热更新\n* /Users/tate/Documents/work/geek/docker/ws/page: 用于存放html及入口构建相关文件\n```bash\n docker run -it -v /Users/tate/Documents/work/geek/docker/ws/src:/home/webpack4-cli/src -v /Users/tate/Documents/work/geek/docker/ws/page:/home/webpack4-cli/page -p 8090:8090 --env WEBPACK_MODE=dev pomelott/webpack-cli\n```\n在宿主机浏览器访问 `localhost:8090/page/index.html` 即可。\n### 启动编译环境\n1. 启动容器在后台执行\n```\n docker run -itd pomelott/webpack4-cli /bin/bash\n```\n2. 查看容器id\n```\n docker ps\n```\n3. 执行构建\n\n```bash\n docker exec -it -w /home/webpack4-cli b7c2b83ed900 /bin/bash\n```\n\n1. 导出build后文件\n\n```bash\n docker cp b7c2b83ed900:/home/webpack4-cli/dist ./\n```\n\n## 快速使用\n\n* 下载依赖（建议yarn）\n\n```bash\n yarn install\n```\n\nor\n\n```bash\n npm install\n```\n\n* 开发模式\n\n```bash\n npm run dev\n```\n\n* 生产模式\n\n```bash\n npm run build\n```\n\n* 压缩图片\n\n```bash\n npm run min-img\n```\n\n* 输出dll\n\n```bash\n npm run dll\n```\n\n* bundle分析\n\n```bash\n npm run analyze\n```\n\n## 在实际工作中使用 & 自定义 HTML\n\ncli将会根据pageDir路径，动态生成webpack entry，在源码中，一个页面就是一个文件夹。\n首先介绍一个html文件夹下可以存放的三个文件：\n\n* entry.js 为本页面的资源入口（无论使用哪种方式定制HTML，此文件都必须存在）\n* param.js 为默认模板传递参数（如果你想快速定制HTML，这是个不错的选择）\n* page.html 用于重写HTML，若此文件存在，cli将会将page.html的优先级提至最高，用以替代默认模板。\n\n你可以通过以下两种方式自定义HTML：\n\n### 使用param.js 和 entry.js\n\n如果param.js存在，cli则会将param.js中的参数与pug引擎模板结合产出对应HTML，entry.js中引入的资源（js,css）将会被通过标签插入至对应HTML中。\n\n* param.js 中的配置项如下，你也可以通过快速查看demo中的代码例子来快速上手：\n | Name | Type | Default | Description |\n |:---:|:---:|:---:|:---:|\n | title | String | 'multipage-cli' | 标题内容 |\n | tag | Object | {meta: [],eadLink: [],headScript: [],bodyLink: [],bodyScript: []} | 控制插入在html中的资源标签 |\n | tag.meta | Array | [] | control meta tag |\n | tag.headLink | Array | [ ] | control link tag in head section |\n | tag.headScript | Array | [ ] | control script tag in head section |\n | tag.bodyLink | Array | [ ] | control link tag in body section |\n | tag.bodyScript | Array | [ ] | control script tag in body section |\n | vueInit | Object | {} | 初始化vue根节点 |\n | vueInit.el | String | undefined | vue根实例的el值，如”#app“ |\n | vueInit.entrance | String | undefined | vue根实例的入口组件，可详见vue-demo |\n | reactInit | Object | {} | 初始化react根节点 |\n | reactInit.el | String | undefined | react根实例的el值，如”#root“ 可详见react-demo |\n\n```js\n // for detai code, you can view vueDemo in dev mode\n module.exports = {\n title: 'Example in multipage',\n tag: {\n meta: [{\n name: 'webpack4-cli',\n content: 'vueDemo'\n }, {\n name: \"webpack4-cli\",\n content: 'https://github.com/pomelott/webpack4-cli'\n }],\n headLink: [{\n rel: \"icon\",\n type: \"image/png\",\n href: 'https://vuejs.bootcss.com/images/logo.png'\n },{\n href: 'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.min.css',\n rel: \"stylesheet\"\n }]\n },\n vueInit: {\n el: '#app',\n entrance: 'example'\n }\n }\n```\n\n```html\n \n \n\n \n Example in Multipage\n \n \n \n \n \n \n\n \n

\n \n \n \n \n\n \n```\n\n### 使用 page.html 和 entry.js\n\n使用page.html 意味着，完全的定制化，你需要完全重写HTML\n\n## 在实际工作中使用 & 自定义env\n\n在根路径的 cli-config.js 文件中自定义env,详细选项如下:\n | Name | Type | Default | Description |\n |:---:|:---:|:---:|:---:|\n | dev.port | String | '8090' | 开发环境端口 (这是8090的时代) |\n | dev.host | String | 'localhost' | devServer host |\n | dev.htmlAssetsAbsolutePath | Boolean\\|String | false | 控制dev环境下，编译后HTML中资源标签的根路径，如果为false则常规使用相对路径（dev一般使用相对路径） |\n | build.htmlAssetsAbsolutePath | Boolean\\|String | false | 控制build环境下，编译后HTML中资源标签的根路径，一般以此来修改为服务器资源基础url或cdn-url |\n\n## 提醒\n\n1. 你可以自定义你的page目录，可根据业务模块嵌套等等。并且输出的html目录也会动态变化。以下有个例子可以帮助您理解，您也可以在cli中尝试\n\n```bash\n Root\n └───src\n │———node_modules\n |———page // html dir\n | |———moduleOne\n | | |———PageOne\n | | | |———param.js\n | | | └———entry.js\n | | └———pageTwo\n | | |———page.html\n | | └———entry.js\n | |———moduleTwo\n | | |———PageThree \n | | | |———param.js \n | | | └———entry.js \n | | └———pageFour\n | | |———param.js \n | | └———entry.js \n\n```\n\n输出路径也会自动变化（包括html和静态资源）\n\n```bash\n Root \n |———dist // output root\n | |——— js\n | | |———common\n | | | └——— vendor.js\n | | |———entry // html unique chunk\n | | | |——— moduleOne\n | | | | |——— pageOne.js\n | | | | └——— pageTwo.js\n | | | └——— moduleTwo\n | | | |——— pageThree.js\n | | | └——— pageFour.js\n | | └———runtime\n | | |——— runtime-pageOne.js\n | | |——— runtime-pageTwo.js\n | | |——— runtime-pageThree.js\n | | └——— runtime-pageFour.js\n | |——— css\n | | |——— ... // css dir is the same as js\n | | ... \n```\n\n1. src/assets路径用以存放静态文件，例如txt文档等，此路径下的文件将不会被打包，并会原样输出至dist下。\n2. 你可以在gulpfile下手动选择压缩插件，通常默认选项就可满足需要。\n3. 你可以再 postcss.config.js中自定义, 现在, autoprefixer 已被配置.\n4. 注意你的环境版本, ![webpack-versioin](https://img.shields.io/badge/webpack-4.0.0+-green) ![node-versioin](https://img.shields.io/badge/node-v10.8.0-green) ![npm-versioin](https://img.shields.io/badge/npm-v6.2.0-green)\n5. 建议使用yarn安装模块包，这将会让你在多人项目中减少因版本不一致带来的问题。\n\n## 核心插件\n\n希望在以下插件中得到更多支持，欢迎给星：\n\n* [html-inline-entry-chunk-plugin](https://github.com/pomelott/html-inline-entry-chunk-plugin)\n* [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)\n* [extract-text-webpack-plugin](https://github.com/webpack-contrib/extract-text-webpack-plugin)\n\n## 友情链接\n\n* [the split-chunk-plugin Doc](https://www.cnblogs.com/pomelott/p/9030208.htm)\n* [webpack 1.x help Doc](https://www.cnblogs.com/pomelott/p/6974167.html)\n* [webpack 4.x help Doc](https://www.cnblogs.com/pomelott/p/8977092.html)","has_starred","hub_user","immutable_tags_settings",{"_71":11,"_72":73},"enabled","rules",[74],".*","is_automated","permissions",{"_78":17,"_79":11,"_80":11},"read","write","admin","user","storage_size",14756324771,"orgData","recentTags",[87,125],{"_88":40,"_89":90,"_91":92,"_93":94,"_95":96,"_46":114,"_115":90,"_116":29,"_117":52,"_53":118,"_119":120,"_121":105,"_122":114,"_123":62,"_124":17},"content_type","creator",10390843,"full_size",334206241,"id",108386106,"images",[97],{"_98":99,"_100":101,"_102":103,"_104":105,"_106":107,"_108":109,"_110":103,"_111":-5,"_112":92,"_59":62,"_113":-5},"architecture","amd64","digest","sha256:a6b77a078244c2e8dcb73d2aec8fe0f43e6506ec40930570de83003c502505d5","features","","last_pulled","2026-09-08T14:04:03.355167109Z","last_pushed","2021-07-06T05:54:31Z","os","linux","os_features","os_version","size","variant","2021-07-06T05:54:30.218396Z","last_updater","last_updater_username","media_type","latest","repository",9445204,"tag_last_pulled","tag_last_pushed","tag_status","v2",{"_88":40,"_89":90,"_91":126,"_93":127,"_95":128,"_46":133,"_115":90,"_116":29,"_117":52,"_53":134,"_119":120,"_121":131,"_122":133,"_123":62,"_124":17},334205923,108385765,[129],{"_98":99,"_100":130,"_102":103,"_104":131,"_106":132,"_108":109,"_110":103,"_111":-5,"_112":126,"_59":62,"_113":-5},"sha256:8d62d16e4604c763cd15f9ddf8c0f5d81c60de4de081a06156885163fff283ec","2026-09-08T01:44:40.757955057Z","2021-07-06T05:45:34Z","2021-07-06T05:45:33.630991Z","webpack4","sbxKitMetadata","isPotentialSpam","isHubSbxKitsEnabled","displaySecurityMetadata","tagAttestations","tagsHaveAttestations",[],"routes/_layout.r.$namespace.$reponame.tags",{"_34":144,"_151":152,"_140":165,"_166":11},{"_36":145,"_38":146,"_41":42,"_43":44,"_45":11,"_46":47,"_48":49,"_50":147,"_53":31,"_28":29,"_54":55,"_56":40,"_57":58,"_59":60,"_61":62,"_63":-5,"_64":58,"_65":66,"_67":11,"_68":29,"_69":148,"_75":11,"_76":150,"_81":29,"_82":83},[],[40],[52],{"_71":11,"_72":149},[74],{"_78":17,"_79":11,"_80":11},"tags",{"_153":154,"_155":-5,"_156":-5,"_157":158},"count",2,"next","previous","results",[159,162],{"_88":40,"_89":90,"_91":92,"_93":94,"_95":160,"_46":114,"_115":90,"_116":29,"_117":52,"_53":118,"_119":120,"_121":105,"_122":114,"_123":62,"_124":17},[161],{"_98":99,"_100":101,"_102":103,"_104":105,"_106":107,"_108":109,"_110":103,"_111":-5,"_112":92,"_59":62,"_113":-5},{"_88":40,"_89":90,"_91":126,"_93":127,"_95":163,"_46":133,"_115":90,"_116":29,"_117":52,"_53":134,"_119":120,"_121":131,"_122":133,"_123":62,"_124":17},[164],{"_98":99,"_100":130,"_102":103,"_104":131,"_106":132,"_108":109,"_110":103,"_111":-5,"_112":126,"_59":62,"_113":-5},[],"canDeleteTags","actionData","errors"]

pomelott/webpack-cli

Tags for pomelott/webpack-cli