├── example ├── public │ └── .gitkeep ├── src │ ├── vue │ │ ├── favicon.ico │ │ ├── assets │ │ │ └── logo.png │ │ ├── main.js │ │ ├── App.vue │ │ ├── index.html │ │ └── components │ │ │ └── HelloWorld.vue │ ├── react │ │ ├── main.jsx │ │ ├── index.css │ │ ├── index.html │ │ ├── App.css │ │ ├── App.jsx │ │ ├── favicon.svg │ │ └── logo.svg │ └── index.html ├── jsconfig.json ├── vite.config.js └── package.json ├── .npmignore ├── .gitignore ├── dist ├── index.d.ts ├── index.mjs ├── index.js ├── index.mjs.map └── index.js.map ├── tsconfig.json ├── tsup.config.ts ├── package.json ├── LICENSE ├── src └── index.ts └── README.md /example/public/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | .idea 4 | example 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | .idea 4 | example/dist 5 | example/package-lock.json 6 | -------------------------------------------------------------------------------- /example/src/vue/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhuweiyou/vite-plugin-mp/HEAD/example/src/vue/favicon.ico -------------------------------------------------------------------------------- /example/src/vue/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zhuweiyou/vite-plugin-mp/HEAD/example/src/vue/assets/logo.png -------------------------------------------------------------------------------- /example/src/vue/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import App from './App.vue' 3 | 4 | createApp(App).mount('#app') 5 | -------------------------------------------------------------------------------- /dist/index.d.ts: -------------------------------------------------------------------------------- 1 | import { Plugin } from 'vite'; 2 | 3 | declare function ViteMpPlugin(): Plugin; 4 | 5 | export { ViteMpPlugin, ViteMpPlugin as default }; 6 | -------------------------------------------------------------------------------- /example/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "@/*": ["./src/*"], 6 | "src/*": ["./src/*"] 7 | } 8 | }, 9 | "include": ["src"] 10 | } 11 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ESNext", 4 | "module": "ESNext", 5 | "moduleResolution": "node", 6 | "lib": ["ESNext"], 7 | "allowSyntheticDefaultImports": true 8 | }, 9 | "include": ["src"] 10 | } 11 | -------------------------------------------------------------------------------- /tsup.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'tsup' 2 | 3 | export default defineConfig({ 4 | entry: ['src/index.ts'], 5 | format: ['esm', 'cjs'], 6 | splitting: false, 7 | sourcemap: true, 8 | clean: true, 9 | minify: true, 10 | dts: true, 11 | }) 12 | -------------------------------------------------------------------------------- /example/src/react/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /example/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | import vue from '@vitejs/plugin-vue' 4 | import { ViteMinifyPlugin as minify } from 'vite-plugin-minify' 5 | import { ViteMpPlugin as mp } from 'vite-plugin-mp' 6 | 7 | export default defineConfig({ 8 | base: '/vite-plugin-mp/', 9 | plugins: [mp(), react(), vue(), minify()], 10 | }) 11 | -------------------------------------------------------------------------------- /example/src/react/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /example/src/vue/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 9 | 10 | 20 | -------------------------------------------------------------------------------- /example/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | example 11 | 12 | 13 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "example", 4 | "version": "1.0.0", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "devDependencies": { 11 | "@vitejs/plugin-react": "^2.0.0", 12 | "@vitejs/plugin-vue": "^3.0.1", 13 | "vite": "^3.0.2", 14 | "vite-plugin-minify": "^1.4.3", 15 | "vite-plugin-mp": "^2.2.3" 16 | }, 17 | "dependencies": { 18 | "react": "^18.2.0", 19 | "react-dom": "^18.2.0", 20 | "vue": "^3.2.37" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /example/src/vue/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | 11 | Vite App 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /example/src/react/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | 11 | Vite App 12 | 13 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /example/src/react/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | 40 | button { 41 | font-size: calc(10px + 2vmin); 42 | } 43 | -------------------------------------------------------------------------------- /dist/index.mjs: -------------------------------------------------------------------------------- 1 | var s=Object.defineProperty,c=Object.defineProperties;var u=Object.getOwnPropertyDescriptors;var e=Object.getOwnPropertySymbols;var m=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable;var l=(i,r,t)=>r in i?s(i,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):i[r]=t,n=(i,r)=>{for(var t in r||(r={}))m.call(r,t)&&l(i,t,r[t]);if(e)for(var t of e(r))g.call(r,t)&&l(i,t,r[t]);return i},p=(i,r)=>c(i,u(r));import{mergeConfig as d}from"vite";import{resolve as f}from"path";import a from"glob";var o=i=>f(process.cwd(),i);function b(){return{name:"vite-plugin-mp",config:i=>d({root:"src",resolve:{alias:{"@":o("src"),src:o("src")}},publicDir:o("public"),build:{emptyOutDir:!0,outDir:o("dist"),rollupOptions:{input:a.sync("src/**/*.html").reduce((r,t)=>p(n({},r),{[t.split("/").slice(1).join(".").replace(/(\.index)?\.html$/,"")]:t}),{})}}},i)}}var y=b;export{b as ViteMpPlugin,y as default}; 2 | //# sourceMappingURL=index.mjs.map -------------------------------------------------------------------------------- /example/src/vue/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 35 | 36 | 41 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite-plugin-mp", 3 | "version": "2.2.3", 4 | "description": "Configure multi-pages applications and code splitting", 5 | "main": "dist/index.js", 6 | "module": "dist/index.mjs", 7 | "types": "dist/index.d.ts", 8 | "scripts": { 9 | "build": "tsup" 10 | }, 11 | "author": "zhuweiyou ", 12 | "license": "MIT", 13 | "keywords": [ 14 | "vite", 15 | "mp", 16 | "mpa", 17 | "multi-pages", 18 | "vite-multi-pages", 19 | "vite-plugin", 20 | "vite-plugin-mp" 21 | ], 22 | "homepage": "https://github.com/zhuweiyou/vite-plugin-mp#readme", 23 | "repository": { 24 | "type": "git", 25 | "url": "git+https://github.com/zhuweiyou/vite-plugin-mp.git" 26 | }, 27 | "devDependencies": { 28 | "@types/glob": "^7.2.0", 29 | "@types/node": "^17.0.38", 30 | "tsup": "^6.0.1", 31 | "vite": "*" 32 | }, 33 | "dependencies": { 34 | "glob": "^8.0.3" 35 | }, 36 | "peerDependencies": { 37 | "vite": "*" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 zhuweiyou 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import { Plugin, mergeConfig } from 'vite' 2 | import { resolve } from 'path' 3 | import glob from 'glob' 4 | 5 | const r = (p: string) => resolve(process.cwd(), p) 6 | 7 | export function ViteMpPlugin(): Plugin { 8 | return { 9 | name: 'vite-plugin-mp', 10 | config: userConfig => 11 | mergeConfig( 12 | { 13 | root: 'src', 14 | resolve: { 15 | alias: { 16 | '@': r('src'), 17 | src: r('src'), 18 | }, 19 | }, 20 | publicDir: r('public'), 21 | build: { 22 | emptyOutDir: true, 23 | outDir: r('dist'), 24 | rollupOptions: { 25 | input: glob.sync('src/**/*.html').reduce( 26 | (obj, file) => ({ 27 | ...obj, 28 | [file 29 | .split('/') 30 | .slice(1) 31 | .join('.') 32 | .replace(/(\.index)?\.html$/, '')]: file, 33 | }), 34 | {} 35 | ), 36 | }, 37 | }, 38 | }, 39 | userConfig 40 | ), 41 | } 42 | } 43 | 44 | export default ViteMpPlugin 45 | -------------------------------------------------------------------------------- /example/src/react/App.jsx: -------------------------------------------------------------------------------- 1 | import { useState } from 'react' 2 | import logo from './logo.svg' 3 | import './App.css' 4 | 5 | function App() { 6 | const [count, setCount] = useState(0) 7 | 8 | return ( 9 |
10 |
11 | logo 12 |

Hello Vite + React!

13 |

14 | 17 |

18 |

19 | Edit App.jsx and save to test HMR updates. 20 |

21 |

22 | 28 | Learn React 29 | 30 | {' | '} 31 | 37 | Vite Docs 38 | 39 |

40 |
41 |
42 | ) 43 | } 44 | 45 | export default App 46 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vite-plugin-mp 2 | 3 | Configure multi-pages applications and code splitting 4 | 5 | ## Usage 6 | 7 | ```bash 8 | npm install vite-plugin-mp -D 9 | ``` 10 | 11 | ```js 12 | // vite.config.js 13 | import { defineConfig } from 'vite' 14 | import { ViteMpPlugin } from 'vite-plugin-mp' 15 | 16 | export default defineConfig({ 17 | plugins: [ViteMpPlugin()], 18 | }) 19 | ``` 20 | 21 | add `jsconfig.json` or `tsconfig.json` to your project 22 | 23 | ```json 24 | { 25 | "compilerOptions": { 26 | "baseUrl": ".", 27 | "paths": { 28 | "@/*": ["./src/*"], 29 | "src/*": ["./src/*"] 30 | } 31 | }, 32 | "include": ["src"] 33 | } 34 | ``` 35 | 36 | if you want to force extract `node_modules` for `vendor`, you can import `splitVendorChunkPlugin` 37 | 38 | ```js 39 | // vite.config.js 40 | import { defineConfig, splitVendorChunkPlugin } from 'vite' 41 | import { ViteMpPlugin } from 'vite-plugin-mp' 42 | 43 | export default defineConfig({ 44 | plugins: [ViteMpPlugin(), splitVendorChunkPlugin()], 45 | }) 46 | ``` 47 | 48 | ## Example 49 | 50 | See [example](https://github.com/zhuweiyou/vite-plugin-mp/tree/master/example) and 51 | 52 | ## Other Plugins 53 | 54 | - [vite-plugin-minify](https://github.com/zhuweiyou/vite-plugin-minify) - Minify html in production 55 | -------------------------------------------------------------------------------- /dist/index.js: -------------------------------------------------------------------------------- 1 | var v=Object.create;var e=Object.defineProperty,x=Object.defineProperties,D=Object.getOwnPropertyDescriptor,P=Object.getOwnPropertyDescriptors,h=Object.getOwnPropertyNames,p=Object.getOwnPropertySymbols,y=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable;var s=(r,i,t)=>i in r?e(r,i,{enumerable:!0,configurable:!0,writable:!0,value:t}):r[i]=t,u=(r,i)=>{for(var t in i||(i={}))c.call(i,t)&&s(r,t,i[t]);if(p)for(var t of p(i))O.call(i,t)&&s(r,t,i[t]);return r},m=(r,i)=>x(r,P(i));var j=(r,i)=>{for(var t in i)e(r,t,{get:i[t],enumerable:!0})},g=(r,i,t,n)=>{if(i&&typeof i=="object"||typeof i=="function")for(let o of h(i))!c.call(r,o)&&o!==t&&e(r,o,{get:()=>i[o],enumerable:!(n=D(i,o))||n.enumerable});return r};var w=(r,i,t)=>(t=r!=null?v(y(r)):{},g(i||!r||!r.__esModule?e(t,"default",{value:r,enumerable:!0}):t,r)),C=r=>g(e({},"__esModule",{value:!0}),r);var V={};j(V,{ViteMpPlugin:()=>b,default:()=>M});module.exports=C(V);var d=require("vite"),f=require("path"),a=w(require("glob")),l=r=>(0,f.resolve)(process.cwd(),r);function b(){return{name:"vite-plugin-mp",config:r=>(0,d.mergeConfig)({root:"src",resolve:{alias:{"@":l("src"),src:l("src")}},publicDir:l("public"),build:{emptyOutDir:!0,outDir:l("dist"),rollupOptions:{input:a.default.sync("src/**/*.html").reduce((i,t)=>m(u({},i),{[t.split("/").slice(1).join(".").replace(/(\.index)?\.html$/,"")]:t}),{})}}},r)}}var M=b;0&&(module.exports={ViteMpPlugin}); 2 | //# sourceMappingURL=index.js.map -------------------------------------------------------------------------------- /example/src/react/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /dist/index.mjs.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { Plugin, mergeConfig } from 'vite'\nimport { resolve } from 'path'\nimport glob from 'glob'\n\nconst r = (p: string) => resolve(process.cwd(), p)\n\nexport function ViteMpPlugin(): Plugin {\n return {\n name: 'vite-plugin-mp',\n config: userConfig =>\n mergeConfig(\n {\n root: 'src',\n resolve: {\n alias: {\n '@': r('src'),\n src: r('src'),\n },\n },\n publicDir: r('public'),\n build: {\n emptyOutDir: true,\n outDir: r('dist'),\n rollupOptions: {\n input: glob.sync('src/**/*.html').reduce(\n (obj, file) => ({\n ...obj,\n [file\n .split('/')\n .slice(1)\n .join('.')\n .replace(/(\\.index)?\\.html$/, '')]: file,\n }),\n {}\n ),\n },\n },\n },\n userConfig\n ),\n }\n}\n\nexport default ViteMpPlugin\n"],"mappings":"6aAAA,mCACA,+BACA,oBAEA,GAAM,GAAI,AAAC,GAAc,EAAQ,QAAQ,IAAI,EAAG,CAAC,EAE1C,YAAgC,CACrC,MAAO,CACL,KAAM,iBACN,OAAQ,GACN,EACE,CACE,KAAM,MACN,QAAS,CACP,MAAO,CACL,IAAK,EAAE,KAAK,EACZ,IAAK,EAAE,KAAK,CACd,CACF,EACA,UAAW,EAAE,QAAQ,EACrB,MAAO,CACL,YAAa,GACb,OAAQ,EAAE,MAAM,EAChB,cAAe,CACb,MAAO,EAAK,KAAK,eAAe,EAAE,OAChC,CAAC,EAAK,IAAU,OACX,GADW,EAEb,EACE,MAAM,GAAG,EACT,MAAM,CAAC,EACP,KAAK,GAAG,EACR,QAAQ,oBAAqB,EAAE,GAAI,CACxC,GACA,CAAC,CACH,CACF,CACF,CACF,EACA,CACF,CACJ,CACF,CAEA,GAAO,GAAQ","names":[]} -------------------------------------------------------------------------------- /dist/index.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["../src/index.ts"],"sourcesContent":["import { Plugin, mergeConfig } from 'vite'\nimport { resolve } from 'path'\nimport glob from 'glob'\n\nconst r = (p: string) => resolve(process.cwd(), p)\n\nexport function ViteMpPlugin(): Plugin {\n return {\n name: 'vite-plugin-mp',\n config: userConfig =>\n mergeConfig(\n {\n root: 'src',\n resolve: {\n alias: {\n '@': r('src'),\n src: r('src'),\n },\n },\n publicDir: r('public'),\n build: {\n emptyOutDir: true,\n outDir: r('dist'),\n rollupOptions: {\n input: glob.sync('src/**/*.html').reduce(\n (obj, file) => ({\n ...obj,\n [file\n .split('/')\n .slice(1)\n .join('.')\n .replace(/(\\.index)?\\.html$/, '')]: file,\n }),\n {}\n ),\n },\n },\n },\n userConfig\n ),\n }\n}\n\nexport default ViteMpPlugin\n"],"mappings":"o4BAAA,2EAAoC,gBACpC,EAAwB,gBACxB,EAAiB,mBAEX,EAAI,AAAC,GAAc,cAAQ,QAAQ,IAAI,EAAG,CAAC,EAE1C,YAAgC,CACrC,MAAO,CACL,KAAM,iBACN,OAAQ,GACN,kBACE,CACE,KAAM,MACN,QAAS,CACP,MAAO,CACL,IAAK,EAAE,KAAK,EACZ,IAAK,EAAE,KAAK,CACd,CACF,EACA,UAAW,EAAE,QAAQ,EACrB,MAAO,CACL,YAAa,GACb,OAAQ,EAAE,MAAM,EAChB,cAAe,CACb,MAAO,UAAK,KAAK,eAAe,EAAE,OAChC,CAAC,EAAK,IAAU,OACX,GADW,EAEb,EACE,MAAM,GAAG,EACT,MAAM,CAAC,EACP,KAAK,GAAG,EACR,QAAQ,oBAAqB,EAAE,GAAI,CACxC,GACA,CAAC,CACH,CACF,CACF,CACF,EACA,CACF,CACJ,CACF,CAEA,GAAO,GAAQ","names":[]} -------------------------------------------------------------------------------- /example/src/react/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | --------------------------------------------------------------------------------