{"id":22701889,"url":"https://github.com/ryuurock/webpack-muilt-page-config","last_synced_at":"2026-05-06T10:39:41.110Z","repository":{"id":132726000,"uuid":"100604888","full_name":"Ryuurock/webpack-muilt-page-config","owner":"Ryuurock","description":"This is a multi-page webpack configuration based on the vue - cli rewrite, which supports hot loading and background template rendering","archived":false,"fork":false,"pushed_at":"2017-08-17T13:18:46.000Z","size":21,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-06T21:34:30.549Z","etag":null,"topics":["muilt-page-config","vue","webpack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ryuurock.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-17T13:11:56.000Z","updated_at":"2020-04-10T09:01:49.000Z","dependencies_parsed_at":null,"dependency_job_id":"35af1853-c326-4306-94e2-f26fe05468dd","html_url":"https://github.com/Ryuurock/webpack-muilt-page-config","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Ryuurock/webpack-muilt-page-config","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ryuurock%2Fwebpack-muilt-page-config","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ryuurock%2Fwebpack-muilt-page-config/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ryuurock%2Fwebpack-muilt-page-config/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ryuurock%2Fwebpack-muilt-page-config/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ryuurock","download_url":"https://codeload.github.com/Ryuurock/webpack-muilt-page-config/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ryuurock%2Fwebpack-muilt-page-config/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32689622,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-06T08:33:17.875Z","status":"ssl_error","status_checked_at":"2026-05-06T08:33:17.221Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["muilt-page-config","vue","webpack"],"created_at":"2024-12-10T07:10:52.699Z","updated_at":"2026-05-06T10:39:41.103Z","avatar_url":"https://github.com/Ryuurock.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"`webpack`的流行给前端开发减少了许多不必要的工作，`webpack`可以让我们更纯粹的关注我们的代码，但是很多人认为它更适合单页应用，主要有以下一些痛点\n\n* 如果模板是后台管理的生成的怎么办\n* 我目前没有使用任何模块化的开发方式，或使用了模块加载器（如`seajs`、`requireJs`等）\n\n其实第二点我已经在上篇文章中讲过了，如果平滑的过渡到`webpack`，痛点一也解释过，只是没有详细的说明，此次分享一个完整的配置，来应对你的多页项目。不管是`jsp`、`php`、`html`、`xshtml`都可以通过具体的配置来使用`webpack`，为什么如此青睐`webpack`，在我看来热**更新技术**、`less`、`sass`、`es6`、`es7`的引入是最吸引我的（尝试过使用`gulp`、但是感觉并没有`webpack`这种一站式服务来得顺手），下面我详细讲述下下面一些配置的用途，部分代码来自[vue-cli](https://github.com/vuejs/vue-cli)。\n\n```\n├─build                 // webpack的配置文件存放目录\n├─Public                // 我们的前端资源存放目录\n│  ├─dev                // 源码存放目录（可以改名为src）\n│  │  ├─css             // 一些共用的css文件，共用才放这里哦\n│  │  ├─font            // 字体文件\n│  │  ├─images          // 图片文件\n│  │  └─js              // js文件\n│  │      ├─libs        // npm里没有的第三方插件或库\n│  │      ├─modules     // 项目的业务组件存放目录\n│  │      └─page        // 页面的目录\n│  │          └─Index   // 具体的页面名称\n│  └─dist               // 编译后的存放目录\n└─static                // 好像是拿来缓存文件用的？vue-cli存在的\n```\n当然，我目前开发的项目是半路引入`webpack`的，大部分都还是`jQuery`那套东西、但是我还是秉着**关注点分离**的原则，将`html`、`css`、`js`按页面来放了，不再使用老掉牙的按文件类型来放、那是因为有了`webpack`的打包才可以这么随意。除了分离出来的模板（`ThinkPHP`用`\u003cinclude file=\"\"/\u003e`标签来引入模板）文件，js和css都是放到同模板名的Public/dev/js/modules目录里了，这样一来可以直接像这样\n```javascript\nrequire( './style.less' );\n...\n```\n先在js文件的头部引入这个组件的样式文件，再来写js代码，至少我们在使用组件的时候不必关心css了（下篇文章会讲讲重构后如何连html也不关注了）\n\n#### images\n这里为什么会有一个`images`目录看起来很多余呢，那是因为我们的php模板里的图片标签`src`前面都带了一个`php`的系统变量，`webpack`插件的静态分析是无法识别这里的路径的，所以保留了这个目录，在打包后用插件拷贝到打包目录里\n\n#### page\n然后是`page`这个目录，这个目录是拿来存放我们页面的三剑客的，比如有一个叫`index`的目录，里面有`css`、`js`、`html`文件，这里的`index`可以看作是一个页面目录，也可以看作是一个分类，如果是分类，那下面就应该是页面了，html里不应该引用`css`文件和`js`文件，因为webpack会帮我们插入生成新的html到我们指定的目录里\n\n最重要的就是`build`目录下的了\n\n#### config.js\n`proxyTable`项我已经在上篇文章中讲过了，这里就不赘述了\n\n#### mapping.js\n这个文件就是描述我们`entry`也就是入口文件和html模板之间的关系映射的文件的\n\n```javascript\nmodule.exports = {\n  // 微知首页\n  'Index': {\n    // 对应到Public/dev/js/page的文件夹名称\n    file: 'main',\n    // 视图层的文件名称，默认为index\n    viewFile: 'index',\n    disable: false,\n    templateOutput: 'Index'\n  },\n  'EditText': {\n    chunks: [ 'editor' ],\n    disable: false\n  },\n  // 编辑模板\n  'Template': {\n    chunks: [ 'editor' ],\n    disable: true\n  },\n  // 默认模板\n  'GzhArtStyle': {\n    chunks: [ 'editor' ],\n    disable: true\n  }\n};\n```\n这里导出的每个对象的键值都对应了`page`目录里的名字，下面的`file`字段对应的入口js文件名称，默认为`main`，`viewFile`对应的是html模板名称，默认为`index`，这里很有用，因为在`ThinkPHP`的`View`目录里模板部分文件夹的，所以我们配合`templateOutput`把html输出过去就不存在目录了，`templateOutput`的默认值为这个对象的键值如Index默认为Index。`disable`字段是开发模式使用的，当运行`npm run dev`命令时会自动扫描这个字段，若为`false`才会启动，如果全部都为false，那么你页面越多造成性能开销就越大，所以除非你同时去开发几个页面，这里建议启动的页面不超过5个，其他页面若要运行，提前`npm run build`一次让它跑编译后的代码就好了。`chunks`字段是用来标记当前页面依赖的除了共有`chunks`需要依赖的其他`chunks`，上面的有chunks字段的三个页面都是引用了百度编辑器，因为百度编辑器的包都太大了，所以不建议抽取到公用的chunk里，这里的配置在`webpack.prod.cfg.js`文件里有单独配置。\n#### utils.js\n这个文件主要是`getHtmlWebpackPlugins`方法，配合注释您就能看懂刚才的mapping配置都怎么用的了\n```javascript\nexports.getHtmlWebpackPlugins = ( rename ) =\u003e {\n  let HtmlWebpackPlugins = [];\n  Object.keys( mapping ).forEach( function( name ) {\n    // 如果不是开发环境 就全部打包\n    // 如果是开发环境 就根据disable来进行打包\n    ( process.env.NODE_ENV !== 'development' ||\n      !mapping[ name ].disable ) \u0026\u0026\n    HtmlWebpackPlugins.push(\n      new HtmlWebpackPlugin( {\n        alwaysWriteToDisk: true,\n        // php端使用到的模板\n        // 如果是其他目录在此修改路径\n        filename: `${ROOT}/Application/Home/View/${mapping[ name ].templateOutput ? mapping[ name ].templateOutput : name}/${mapping[name].viewFile || 'index'}.html`,\n        // 插件用的模板文件\n        template: `${ROOT}/${config.$d}/js/page/${name}/${mapping[name].viewFile || 'index'}.${mapping[name].templateType || 'html'}`,\n        chunks: ( function() {\n          if ( !rename ) {\n            //let chunks = [ 'vendor.npm', 'vendor.TP', 'manifest', 'vendor.modules' ];\n            let chunks = [ 'vendor.modules', 'vendor', 'manifest' ];\n            if ( mapping[ name ].chunks ) {\n              chunks = chunks.concat( mapping[ name ].chunks );\n            }\n            return chunks;\n          }\n          return [];\n        }() ).concat( [ `${rename ? config.dev.entryPrefix : ''}${name}` ] ),\n        // 手工排序\n        chunksSortMode: 'manual',\n        inject: true,\n        showErrors: false\n      } ) );\n  } );\n  return HtmlWebpackPlugins;\n}\n```\n`alwaysWriteToDisk`这个字段是我们能前后端结合开发的关键，没有使用后端模板的项目真的做到前后分离时是不需要这个字段的，因为PHP会读这个文件再渲染数据出来给浏览器\n\n#### webpack.base.cfg.js、webpack.dev.cfg.js\n都是些老生常谈的配置，这里就不赘述了。值得注意的是`dev.client.js`这个文件被我删了，因为使用了`alwaysWriteToDisk`实时写入的功能，改变css文件和js文件都会强制刷新，那热更新完全就没法用了，所以html文件的变化还是需要手动刷新的\n\n#### webpack.prod.cfg.js\n`HtmlWebpackPlugin`这个插件确实是有多少页面就要插入多少个实例进去的，所以直接\n```javascript\n...utils.getHtmlWebpackPlugins( false ),\n```\n展开这个数组就好了，这里传入的布尔参数是为了区分开发模式和build模式，传入`true`只会有一个chunk被包含进来，就是当前页面依赖的所有js和css等\n然后是`chunks`\n##### manifest\n有的页面因为太简单并没有依赖太多共用的js，但是依赖了共用的css，所以这个chunk仅仅是为了抽取css文件用，造成引用了一个空的js，暂时没有想到好的解决办法，欢迎再issues提出改进建议\n\n##### vendor.modules\n这个chunk是为了抽取我们自己写的业务组件、在修改业务组件后能够很好的利用缓存只更新这一个文件\n\n##### commonChunk\n上文`mapping`里的chunks字段就是这里配置的，如果还有其他局部共用的大chunk可以在这里再配置一个\n##### vendor\nvendor就是拿来放置第三方插件的，这里抽取了npm和lib里面的，当项目稳定后处于一个稳定的维护期，没有较大改动时，这个文件就可以长期缓存在用户的电脑里了。\n\n```javascript\nnew CopyWebpackPlugin( [ {\n  from: path.resolve( __dirname, `../${config.$d}/images` ),\n  to: `${config.build.assetsSubDirectory}/images`,\n  ignore: [ '.*' ]\n} ] ),\n```\n上面的代码就是拷贝images这个目录到我们打包生成的目录里，防止资源丢失的问题\n***\n这个脚手架很可能无法直接运行在你的项目里，但是能为你的多页入口的`website`提供一个很好的引入`webpack`的思路\n\nhave fun ~~","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryuurock%2Fwebpack-muilt-page-config","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryuurock%2Fwebpack-muilt-page-config","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryuurock%2Fwebpack-muilt-page-config/lists"}