{"id":50358638,"url":"https://github.com/pomelott/webpack4-cli","last_synced_at":"2026-05-30T00:01:27.469Z","repository":{"id":43514144,"uuid":"131704852","full_name":"pomelott/webpack4-cli","owner":"pomelott","description":"🌈 Webpack4 + Vue/React + TS (SPA or MPA) 面向实际工作流(开发 \u0026 编译 \u0026 打包 \u0026 部署 \u0026 上线)的脚手架，并提供docker镜像供快速构建。","archived":false,"fork":false,"pushed_at":"2022-12-12T23:46:25.000Z","size":2131,"stargazers_count":120,"open_issues_count":21,"forks_count":34,"subscribers_count":8,"default_branch":"master","last_synced_at":"2023-11-07T19:06:27.019Z","etag":null,"topics":["entry-html","page-html-cli","postcss","runtime-chunk","webpack-versioin","webpack4-cli"],"latest_commit_sha":null,"homepage":"https://github.com/pomelott/webpack4-cli","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pomelott.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-01T11:19:20.000Z","updated_at":"2023-11-07T19:06:27.020Z","dependencies_parsed_at":"2023-01-28T03:15:47.374Z","dependency_job_id":null,"html_url":"https://github.com/pomelott/webpack4-cli","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"purl":"pkg:github/pomelott/webpack4-cli","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pomelott%2Fwebpack4-cli","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pomelott%2Fwebpack4-cli/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pomelott%2Fwebpack4-cli/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pomelott%2Fwebpack4-cli/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pomelott","download_url":"https://codeload.github.com/pomelott/webpack4-cli/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pomelott%2Fwebpack4-cli/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33675019,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-29T02:00:06.066Z","response_time":107,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["entry-html","page-html-cli","postcss","runtime-chunk","webpack-versioin","webpack4-cli"],"created_at":"2026-05-30T00:01:27.327Z","updated_at":"2026-05-30T00:01:27.460Z","avatar_url":"https://github.com/pomelott.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 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\u003cimg width=\"200\" height=\"200\" src=\"https://webpack.js.org/assets/icon-square-big.svg\"\u003e\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## 在实际工作中使用 \u0026 自定义 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    \u003c!doctype html\u003e\n    \u003chtml lang=\"en\"\u003e\n\n    \u003chead\u003e\n        \u003ctitle\u003eExample in Multipage\u003c/title\u003e\n        \u003cmeta name=\"webpack4-cli\" content=\"vueDemo\" /\u003e\n        \u003cmeta name=\"webpack4-cli\" content=\"https://github.com/pomelott/webpack4-cli\" /\u003e\n        \u003clink rel=\"icon\" type=\"image/png\" href=\"https://vuejs.bootcss.com/images/logo.png\" /\u003e\n        \u003clink href=\"https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.min.css\" rel=\"stylesheet\" /\u003e\n        \u003clink rel=\"stylesheet\" href=\"http://www.cdn-plugin.com/assets/css/entry/example/vueDemo.css?v=2466d76ff005024cce26\"\u003e\n    \u003c/head\u003e\n\n    \u003cbody\u003e\n        \u003cdiv id=\"app\"\u003e\n            \u003cdiv is=\"example\"\u003e\u003c/div\u003e\n        \u003c/div\u003e\n        \u003cscript src=\"http://www.cdn-plugin.com/assets/js/runtime/runtime-vueDemo.js?v=2466d76ff005024cce26\"\u003e\u003c/script\u003e\n        \u003cscript src=\"http://www.cdn-plugin.com/assets/js/common/vendors.js?v=5b4f3badf8d6ddb0036f\"\u003e\u003c/script\u003e\n        \u003cscript src=\"http://www.cdn-plugin.com/assets/js/entry/example/vueDemo.js?v=8df1c19f97ce1a9abf72\"\u003e\u003c/script\u003e\n    \u003c/body\u003e\n\n    \u003c/html\u003e\n```\n\n### 使用 page.html 和 entry.js\n\n使用page.html 意味着，完全的定制化，你需要完全重写HTML\n\n## 在实际工作中使用 \u0026 自定义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)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpomelott%2Fwebpack4-cli","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpomelott%2Fwebpack4-cli","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpomelott%2Fwebpack4-cli/lists"}